レンダリング複数のボタンは、プログラム

Question

JSON { "ACTIONTYPE" に基づいて、ボタンをレンダリングするためにネイティブたい反応します"：" this.getCellNumber（ 'no'） "、 " style "：" }、{ "フィールド"： "ボタン"、 "FieldText"： "No"、 "FieldAction"： "これは、 getCellNumber（ 'はい'）」、 "スタイル"： "" }] }

どのように再で、私はループにそれをすることができますビュー内のボタン数を取得する関数です。

render(){ 
    return(

     <View style={this.styles.ButtonValContainer}> 

     </View> 
); 

} 

Answer 1

が反応すると、レンダリングする要素の配列を簡単に収集できます。

const buttons = [ 
    { 
     text: 'button one', 
     action:() => console.log('pressed button one'), 
    }, 
    { 
     text: 'button two', 
     action:() => console.log('pressed button two')    
    } 
]; 

....

// react class definition 

// ... 
// assuming `Button` is a defined class in scope. 

render() { 
    const renderedButtons = buttons.map(b => { 
    return <Button key={b.text} text={b.text} onPress={b.action} />; 
    }); 

    return (
    <View> 
    {renderedButtons} 
    </View> 
) 
} 

ビットに役立ちます願っています。

Answer 2

リストを反復処理し、コールバック内のコンポーネントを返すことができます。 https://facebook.github.io/react/docs/multiple-components.html

：唯一の要件は、返されたコンポーネントが再レンダリング時にリアクト内部で使用されている key属性、持っているということです

render() { 
    return(
    <Wrapper> 
     {items.forEach(function(item) { 
     return (
      <View style={this.styles.ButtonValContainer} key={'UNIQUE_KEY_HERE'}> 
      ... 
      </View> 
     ); 
     })} 
    </Wrapper> 
); 
} 

がここにいくつかの詳細情報です（それは削除するかを知っているように/シフトは、/ etcを更新します）