React Nativeのサーバーサイドデータでスタイルを適用できますか？

Question

私のRNコンポーネントの1つが、外部サーバーからデータをレンダリングしました。データはRNコンポーネントでラップされます。

... 

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

以下のような

及びDBは、単純なオブジェクトです。私が何をしたいか

{ key: 1, greeting: 'Hello' } 

は、サーバー側のコードを使用してクライアント側にスタイルを適用し、編集RNコードなしです。

私が試した：

Hello(red) 

をしかし、結果は以下の通りであった：

{ 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>`'} 

私は期待文字列

がいる可能性があるとして、彼らは扱わ

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

毎回？もしそうなら、どうすればいいですか？それ？

Answer 1

クライアント側のコードを変更しない限り、これはできません。 APIから受け取るものは文字列です。クライアント側のコード内で有効なJSXに変換する必要があります。

https://github.com/jsdf/react-native-htmlviewのようなプラグインを参照すると、内部の未処理のHTML文字列をネイティブのビューに反応させることができますが、HTMLではなくRNの味のあるテンプレート文字列になります。

また、私はあなたがこの

のように、クライアント側で

... 

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

をレンダリングすることができます

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

に再構築するあなたのAPIレスポンスは今これがあなたに可能にすることによって、あなたの<Text>ノードをより詳細に制御できますことをお勧めしたいですデフォルトスタイル、イベントハンドラなどを追加することができます。

変更するたびに新しいアプリケーションをビルドする必要がある場合は<Text>ノードに関連するものはありません。https://microsoft.github.io/code-push/を使用すると、アプリケーションにJS変更のみをほぼ即座に展開できます。