フレックスの中心要素：0. *

Question

フレックスボックスを使用して、プロパティ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> 

Answer 1

私はあなたがスタイリングのフレックスボックススタイルを得ていないと思います。

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

希望です！