React原生文本脚本解析

Question

是否有一种方法可以动态地将react原生脚本注入到代码中?

我动态生成了如下脚本:

<Text><Text styles={{ fontSize: 30, fontWeight: 'bold'}}>Two Color Options</Text></Text><Text> <Text><Text styles={{ fontSize: 30, fontWeight: 'bold'}}>Stone Grey</Text>- Great for new...  </Text>

，并且需要像在react-native应用程序中使用样式的Text组件那样显示它。

我尝试了react-jsx-parser，但它不像预期的那样工作。

感谢您的帮助!

Answer 1

您可以将字符串中的动态文本添加为<Text>组件的子组件。例如:

const dynamicText = 'option1'
return (
<>
<Text styles={{ fontSize: 30, fontWeight: 'bold'}}>Two Color Options</Text>
<Text>{dynamicText}</Text>
</>
)

如果dynamicText是未定义的，可以使用以下语法

const dynamicText = 'option1'
return (
<>
<Text styles={{ fontSize: 30, fontWeight: 'bold'}}>Two Color Options</Text>
{!!dynamicText && <Text>{dynamicText}</Text>}
</>
)

只有当dynamicText值为true时，文本才会显示。所以它不是undefined, null或"(空字符串)。

!!语法将该值转换为布尔值。如果没有它，"将返回false，并将被添加到组件中。这给出了一个错误，因为React Native不允许在<Text>组件中不呈现字符串。