2行のリストビューを作成する

Question

2行リストを作成したい。これは私が、私はこのコード

<FlatList 
    style={styles.list}    //<-- This Line 
    numColumns={2}         //<-- And this one 
    data={[{key: 'row1'}, {key: 'row2'},{key: 'row3'},{key: 'row4'}]} 
    renderItem={({item}) => 
    <View> 
    <Text>{item.key}</Text> 
    </View> 
    } /> 

でflatListを使用しようとした

達成したい結果であるしかし、私は、私もしようとした

彼の結果を得ましたこのコードで各項目の幅を画面幅の半分に設定します

<View style={{width: width /2}}> 
<Text>{item.key}</Text> 
</View> 

ただし、デバイスの向きが変わると機能しません。

私が達成したいのは、画面の幅を持つ仮想テーブルを作成し、各セルの先頭にテキストを配置することです。このようなもの

+------------------------------+-----------------------------+ 
| item 1.      | item 2.      | 
+------------------------------+-----------------------------+ 
| item 3.      | item 4      | 
+------------------------------+-----------------------------+ 
| item5      | item 6      | 
+------------------------------+-----------------------------+ 

あなたはそれを達成する方法を知っていますか？

Answer 1

renderItem支柱内の親ビューにflex:1を追加するだけです。ように

<FlatList 
    style={{flex: 1}} //whatever style you had   
    numColumns={2}         
    data={[{key: 'row1'}, {key: 'row2'},{key: 'row3'},{key: 'row4'}]} 
    renderItem={({item}) => 
     <View style = {{flex: 1}}> 
      <Text>{item.key}</Text> 
     </View> 
    } 
/>