Question

我的一个RN组件从外部服务器渲染数据。数据由RN组件包装。

如下所示

... 

<View>
 <Text>{this.props.db.greeting}</Text>
</View>

和DB是一个简单的对象。

{ key: 1, greeting: 'Hello' }

我想要做的是，没有编辑RN代码，使用服务器端代码将样式应用于客户端。

我试过了：

{ key: 1, greeting: '<Text style={{color: 'red'}}>Hello</Text>'}
{ key: 1, greeting: '{ <Text style={{color: 'red' }}>Hello</Text> }'}
{ key: 1, greeting: '{{ <Text style={{ color: 'red' }}>Hello</Text> }}'}
{ key: 1, greeting: '`<Text style={{ color: 'red' }}>Hello</Text>`'}

我期待：

Hello(red)

但结果是：

<Text style={{color: 'red'}}>Hello</Text>

每次他们都被视为一个字符串

这可能吗？，如果是这样，我怎么能这样做？

Answer 1

除非您决定修改客户端代码，否则无法做到这一点。您从API收到的是一个字符串，您需要将其转换为客户端代码中的有效JSX。

您可以参考像https://github.com/jsdf/react-native-htmlview这样的插件，它们会在原始视图中呈现原始HTML字符串，但在您的情况下，它不是HTML而是RN风格的模板字符串。

或者，我建议您重新构建对

的API响应

{ key: 1, greetingText: 'Hello', greetingStyles: {color: 'red'}}

现在您可以像这样在客户端进行渲染

... 

<View>
 <Text style={this.props.db.greetingStyles}>{this.props.db.greetingText}</Text>
</View>

通过允许您添加默认样式，事件处理程序等，您可以更好地控制<Text>个节点。

如果您担心每次更改与<Text>节点相关的任何内容时都必须为应用程序部署新版本，则不需要，因为使用https://microsoft.github.io/code-push/您只能将JS更改为您的应用程序几乎立即：）

可以在React Native中应用带有服务器端数据的样式吗？

1 个答案: