是否可以在React Native中将服务器端数据的样式应用？

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风格的模板字符串。

另外我建议重新构建，以

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

您的API响应，现在你可以允许在客户端渲染这样

... 

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

这使您更好地控制您的<Text>节点您添加默认样式，事件处理程序等。

如果您担心每次更改都必须为应用程序部署新版本任何与<Text>节点相关的东西，你不需要因为使用https://microsoft.github.io/code-push/你可以几乎立即部署JS只改变你的应用程序:)