ダイナミックコンポーネントリアクション（ネイティブ）を作成

Question

オブジェクトの[{"id:1","title": "News",....},"id":2, "title": "History", .....}]のWebサービスの配列から取得するので、反応ネイティブスクロール可能なタブビューhttps://github.com/skv-headless/react-native-scrollable-tab-viewを使用してタブとスクロールを作成したいのですが、管理者はいつでもより多くのタイトルを追加できるので、動的にする方法を知っています。静的なので、この目的のためには動作しません。私のコードで

私は私が最終的には、Webサービス（タイトル）の例NewsComponent
から得ることのようなコンポーネント名を作りたいまた、この

constructor(props){ 
     super(props); 
     this.state = { 
      ws: [] 
     }; 
    } 

componentDidMount() { 
     fetch('http://localhost:8000/api/getThemeByOrganisations', { 
      }).then((response) => response.json()) 
       .then((res) => { 
        this.setState({ 
         ws : ws 
        }); 
       }) 
       .catch((error) => { 
        console.error(error); 
       }); 
    }; 

好きです私このようにしたいが、ダイナミックにしたい。

var App = React.createClass({ 
    render() { 
    return (
     <ScrollableTabView renderTabBar={() => <CustomTabBar someProp={'here'} />}> 
     <ReactPage tabLabel="React" /> 
     <FlowPage tabLabel="Flow" /> 
     <JestPage tabLabel="Jest" /> 
     </ScrollableTabView> 
    ); 
    } 
}); 

ここで私は "ws"のようにして動的なページを作成したいので誰でも助けてくれてありがとう。

Answer 1

オブジェクトの配列からコンポーネントをレンダリングするにはmapを使うことができます。例は次のようになります。

render() { 
    return (
    <View> 
     {myArray.map(item => <TargetComponent {...item}/>)} 
    </View> 
) 
} 

Answer 2

ので
まず反応し、ネイティブ・スクロール・タブ・ビューを使用するために、私はResultItem

var ResultItem = React.createClass({ 
    render: function() { 
    return (
     <Text tabLabel> 
      {this.props.result.nom} 
     </Text> 
    ); 
    } 
}); 

新しいコンポーネントを作成する第二主成分

<ScrollableTabView 
       renderTabBar={() => <ScrollableTabBar />}> 
       {this.state.ws.map(function (result) { 
          return <ResultItem key={result.id} result={result} tabLabel={result.nom}/>; 
         })} 
        </ScrollableTabView> 

をレンダリング

動的レンダリングでうまく動作します