React-Nativeの文字列をコンポーネントに変更するにはどうすればいいですか？

Question

私はvar str = '<Text> something </Text>'を持っていますが、それをコンポーネントにレンダリングできますか？

私は次のことを試してみましたが、それは

var str = '<Text>test</Text>' 
    render(){ 
     return(
      <Text>{str}</Text> 
     ) 
    } 

が反応でdangerouslySetInnerHTMLに似てこれを行うにはどのような方法がある:(動作しません？

私のプロジェクトでは、私がでJSONを取得私は正規表現によってようにTextにhtml要素p等を交換したいだけ

{ 
    content:'<p>example</p>' 
} 

のようにフェッチが、 resultは文字列です。

私もreact-native-html-renderを試しましたが、ドキュメントは理解できず、うまく動作しません。

Answer 1

応答の内部HTMLをRN Text要素に変換する関数を作成できます。

残念ながら

var str = '<p>something here</p>' 

var convertToText = (response) => { 
    var text = response.split(/[^A-Za-z]/).filter(x => x !== '').slice(1, -1).join(' ') //gives "something here"; 
    return <Text>text</Text>; 
} 

convertToText(str) === <Text>something here</Text> 

Answer 2

var str = <Text>test</Text>; 

    render() { 
    return (
     <View style={styles.container}> 
     {str} 
     </View> 
    ); 
    } 

Answer 3

州の一部として設定します（例：this.state.str）。コンストラクタで、デフォルト値（例：this.state = {str: "test"}）を設定します。フェッチを行う関数でsetStateを実行して値を変更します（例：this.setState({str: response})）。最後に、レンダリングでは次のようにします。

Answer 4

JSXはReact.createElement呼び出しにtranspiledにつれて、コンパイル時に組み込まれる必要があるタグ。または、自分でReact.createElementコールを書くこともできます。

たとえば、サーバー応答でJSXツリーを歩くことができるパーサーを作成することができます。何かのように

function parseResponseIntoJSXTree (string) { 
    // very psuedo example: 
    var type = parseJSXTag(string) // produces `Text` 
    var props = parseJSXTagProps(string) // produce any attribute=values 
    var innerContent = parseJSXContent(string) // produces 'something' 
    return React.createElement(type, props, children) 
} 

ルートノードよりも深い子要素がある場合は、ツリーを歩く必要があるため、これは表面を傷つけるだけです。

私の恐ろしい、恐ろしい答えますか？ は、あなたのバンドルにbabelを含めると実行します。

var renderableContent = require('babel-core', {presets: ['react-native']) 
    .transform('<Text>something</Text>') 

注 - babelランタイム（おそらく）には存在しないであろうノードの依存関係を必要としない限り、私は非常にこれを阻止、それは技術的に働くだろう。

Answer 5

私の要件は、JSONサーバーの応答に応じて、任意のコンポーネントを含む動的な画面を作成する場合と似ています。ここに私がやったことです：

const blockContent = [ 
    { 
    type: 'text', 
    content: 'Some title', 
    size: 20, 
    color: 'black', 
    wrapperPadding: 10 
    }, 
    { 
     type: 'text', 
     wrapperPadding: 10, 
     size: 16, 
     color: 'red', 
     content: 'Some text. Some text. Some text. Some text. Some text. ' 
    }, 
    { 
     type: 'text', 
     wrapperPadding: 10, 
     size: 16, 
     color: 'red', 
     content: 'Some text. Some text. Some text. Some text. Some text. ' 
    }, 
    { 
     type: 'link', 
     content: 'Some link', 
     size: 16, 
     color: 'blue', 
     wrapperPadding: 10, 
     url: 'http://www.google.com' 
    } 
]; 

    class CustomBlock extends Component { 

     openURL (url) { 
     Linking.openURL(url).catch(err => console.error('An error occurred', err)); 
     } 

     render() { 
     return (
      <View style={styles.container}> 
      {blockContent.map((item) => { 
       switch (item.type) { 
       case 'text': 
        return (
        <View style={{padding: item.wrapperPadding}}> 
         <Text style={{fontSize: item.size, color: item.color}}>{item.content}</Text> 
        </View> 
       ); 
       case 'link': 
        return (
        <TouchableHighlight style={{padding: item.wrapperPadding}} underlayColor="lightgrey" onPress={this.openURL.bind(this, item.url)}> 
         <Text style={{fontSize: item.size, color: item.color}}>{item.content}</Text> 
        </TouchableHighlight> 
       ); 
       } 
      })} 
      </View> 
     ); 

それはあなたが、私はテキストとリンクで行ったように使用すると、同様にそれらのスタイルを期待するすべてのコンポーネントを宣言するのは非常に簡単です。