带有 flex 的中心元素：0.*答案

【问题标题】：center elements with flex: 0.*带有 flex 的中心元素：0.*
【发布时间】：2017-01-05 22:14:27
【问题描述】：

是否可以使用 flexbox 将具有属性 flex: 0.* 的元素水平居中？我有这样的代码。这是我使用当前解决方案的 JSX。这种居中元素的方式合适吗？

<View style={{flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center', backgroundColor: 'tomato'}}>
    <View style={{alignItems: 'center', marginBottom: 20}}>
        <Text style={{fontSize: 18, textAlign: 'center'}}>Hello, User</Text>
        <Text style={{fontSize: 16, textAlign: 'center'}}>Enter your email to continue</Text>
    </View>

    <TextInput
        placeholder='Enter email'
        onChangeText={this.onEmailChange.bind(this)}
        value={this.props.email}
        style={{height: 40, borderWidth: 2, borderColor: 'black', width: Dimensions.get('window').width * .7, padding: 8, marginLeft: Dimensions.get('window').width * .15}}
    />
</View>

【问题讨论】：

标签： react-native flexbox react-jsx

【解决方案1】：

我认为您没有获得 flexbox 样式的样式。

Flexbox 处理比率而不是预定义的值。

例如：

使用 flexbox 进行样式设置会很容易，例如，一个函数：

   border(color){
    return{
        borderColor:color,
        borderWidth:4,
      }
    }

<View style={[styles.container,this.border('yellow')]}>
    <View style={[styles.topContainer, this.border('red')]}>
        <View style={[styles.topContainerLeft,this.border('brown')]}>
          <View style={[styles.topContainerLeftLeft,this.border('blue')]}>
              <Text>TopLeftLeft</Text>
          </View>
          <View style={[styles.topContainerLeftRight,this.border('violet')]}>
              <Text>TopLeftRight</Text>
          </View>
        </View>
        <View style={[styles.topContainerRight,this.border('green')]}>
            <Text>TopRight</Text>
        </View>
    </View>
    <View style={[styles.bottomContainer, this.border('black')]}>
      <View style={[styles.bottomContainerLeft,this.border('brown')]}>
          <Text>BottomLeft</Text>
      </View>
      <View style={[styles.bottomContainerRight,this.border('green')]}>
          <Text>BottomRight</Text>
      </View>
    </View>
  </View>


const styles = StyleSheet.create({
  container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
  },
   topContainer:{
flex:3,
  flexDirection:'row',
  alignItems:'center',
  justifyContent:'center',

},
   bottomContainer:{
  flex:5,
    flexDirection:'row',
    alignItems:'center',
    justifyContent:'center',

},
topContainerLeft:{
  flex:2,
    flexDirection:'row',
    alignItems:'center',
    justifyContent:'center',
},
topContainerRight:{
    flex:4,
    alignItems:'center',
    justifyContent:'center',
},
bottomContainerLeft:{
    flex:2,
    alignItems:'center',
    justifyContent:'center',
},
bottomContainerRight:{
    flex:5,
    alignItems:'center',
    justifyContent:'center',
},
topContainerLeftLeft:{
  flex:1,
    alignItems:'center',
    justifyContent:'center',
},
topContainerLeftRight:{
  flex:3,
  alignItems:'center',
  justifyContent:'center',
}

});

对应的结果是 Result with predefined border

希望这会有所帮助！

【讨论】：