固定ボトム全幅ポジションボタンはネイティブに反応します

Question

反応ネイティブのiosでアプリのような図を作成したいと思います。 私は写真と三つのボタンとリストビューをsetted：

<View> 
    <ListView contentContainerStyle={styles.list} 
      dataSource={this.state.dataSource} 
      renderRow={(rowData) => <TouchableHighlight onPress={(() => this.openProjectCard(rowData.cards_id, rowData.area_all))}> 
       <Image style={styles.item} 
         source={{uri: `http://romangjx.bget.ru/rubkoff_pics/p${rowData.code}/main/main.jpg`}}/> 
      </TouchableHighlight>} 
      initialListSize={15}/> 
    <View style={styles.bottomBar}> 
     <Text 
      style={styles.marginHorizontal} 
      onPress={this.showBelow100} 
      color='#841584'> 
      {(() => this.sup('<100м', '2'))()} 
     </Text> 
     <Text 
      style={styles.marginHorizontal} 
      onPress={this.showBetween100And200} 
      color='#841584'> 
      {(() => this.sup('100м-200м', '2'))()} 
     </Text> 
     <Text 
      style={styles.marginHorizontal} 
      onPress={this.showAbove200} 
      color='#841584'> 
      {(() => this.sup('>200м', '2'))()} 
     </Text> 
    </View> 
</View> 

スタイルがあります

t styles = StyleSheet.create({ 
    list: { 
     justifyContent: 'center', 
     flexDirection: 'row', 
     flexWrap: 'wrap' 
    }, 
    item: { 
     backgroundColor: '#CCC', 
     margin: 10, 
     width: 100, 
     height: 100 
    }, 
    bottomBar: { 
     flexDirection: 'row', 


    }, 
    bottomButton: { 
     flex: 1 
    } 
}); 

私は、フレックスとflexDirectionを多くのことを試していたが、それは私のために間違っていた。..

このボタンの位置を固定して、ボタンバーの全幅と3つのボタンをインラインにする方法を教えてください。

Answer 1

リストと最初のビューにflex:1を追加します。ボタンに追加することもできます。

サンプル：

ビュー

<View style={styles.container}> 
    <View style={styles.list}> 
    </View> 
    <View style={styles.bottomBar}> 
     <Text style={styles.buttons}>Test 1</Text> 
     <Text style={styles.buttons}>Test 2</Text> 
     <Text style={styles.buttons}>Test 3</Text> 
    </View> 
</View> 

スタイル

var styles = StyleSheet.create({ 
    container:{ 
    flex:1, 
    }, 
    list: { 
     justifyContent: 'center', 
     flexDirection: 'row', 
     flexWrap: 'wrap', 
     flex:1, 
    }, 
    bottomBar: { 
     flexDirection: 'row', 
     backgroundColor:'gray', 
    }, 
    buttons:{ 
    flex:1, 
    textAlign:'center' 
    }, 
});