ループ内で複数のボタンをビュー内に作成する

Question

反応ネイティブアプリ用に複数のカスタムボタンを作成したいと思います。 配列内のすべての情報を持つ配列を使用しています。配列のすべてのボタンを繰り返し、すべてのボタンを1つのビューで作成します。 私はこのようなものを試しました：

<View> 
    for(let i=0; i<numberButtons; i++) { 
      <TouchableOpacity style={[styles.mapView, this.props.mapViewStyle]} > 
      <Image 
       style={[styles.image, this.props.imageStyle]} 
       source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} 
      /> 
      </TouchableOpacity> 
} 
</View> 

それは動作していないようです。私は反応ネイティブフレームワークからエラーを得るので、ビューでjsを実行できないと思いますか？

どうすればいいですか？

Answer 1

あなたはこのようにそれを行うことができます。

renderButtons =() => { 
    const buttons = []; 
    for(let i = 0; i < numberButtons; i++) { 
    buttons.push(
     <TouchableOpacity style={[styles.mapView, this.props.mapViewStyle]}> 
     <Image 
      style={[styles.image, this.props.imageStyle]} 
      source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} 
     /> 
     </TouchableOpacity> 
    ) 
    } 
    return buttons; 
} 



render() { 
    return (
    <View> 
     {this.renderButtons()} 
    </View> 
) 
}