TX004

<Box> 巢狀置於 <Text> 內

主控台

Text.js error TX004: <Box> cannot be nested inside <Text>.

發生原因

<Text> 用於排列一段行內文字,不能包含 Flexbox 容器。某個 <Box>(或會渲染 <Box> 的元件,例如 <Spacer> 或 <Divider>)在 <Text> 內渲染。

修正方式

將 <Box> 移到外面,並將同層文字並排放在同一列:

// Before<Text>  Status: <Box><Text color="green">ok</Text></Box></Text>// After<Box flexDirection="row">  <Text>Status: </Text>  <Text color="green">ok</Text></Box>

巢狀的 <Text> 沒有問題,會渲染為行內 span。