Question

我想在ios上创建像app一样的应用本机。我设置了一个带有图片和三个按钮的列表视图：

<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
   }
});

我使用flex，flexDirection进行了很多实验，但对我来说这是错误的..

如何定位此按钮底部固定并使按钮栏全宽，并且三个按钮内联？

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'
   },
});

固定底部全宽位置按钮反应原生

1 个答案: