1

私は素晴らしいReactNativeKatasを使って、React Native でのフレックスボックス レイアウトを学んでいます。次の例でflexは、親の 2 つの子ビューView( を使用するビュー) のプロパティstyles.containerが に設定されてい0.1ます。両方を設定すると、 0.11View番目がディスプレイの絶対左に、2 番目Viewが中央に配置されます。両方のプロパティに設定0.1すると、なぜこのように整列するのですか?flexView

const FlexSize= (props)=>{
  return (
    <View style={styles.container}>
      <View style={{flex: 0.1}}>
        <Box style={{flex: 0.7}}/>
        <Box style={{backgroundColor:'yellow'}}/>
        <Box/>
        <Box style={{flex: 0.3, backgroundColor:'yellow'}}/>
      </View>
      <View style={{flex: 0.1}}>
        <Box style={{flex: 0.5}}/>
        <Box style={{backgroundColor:'yellow'}}/>
        <Box/>
        <Box style={{flex: 0.5, backgroundColor:'yellow'}}/>
      </View>
    </View>
  )
}


const styles = StyleSheet.create({
  container: {
    flex:1,
    flexDirection:'row',
    backgroundColor: colors[1],
  },
});

シミュレータでレンダリング:

フレックス サイジングの例

4

1 に答える 1

3

Views基本的に、画面全体で 2 つを均等にレンダリングしています。両方の子ビューが同じ色 ( backgroundColor: color[1]) であるため、1 つの連続した背景のように見えます。

何が起こっているかは、子ビュー内でレンダリングしているすべてのボックスでありflex-start、それらの親でレンダリングされます。したがって、最初の子のボックスは垂直に積み重ねてレンダリングされます。ここで、2 番目の子は最初の子と同じスペースを共有する必要があります。したがって、画面の「中央」から開始します。

これをよりよく視覚化するために、コンテナの下のすべてをコメントアウトし、代わりにこれをレンダリングすることをお勧めします:

<View style={styles.container>
  <View style={{flex: 0.1, backgroundColor='red'}} ></View>
  <View style={{flex: 0.1, backgroundColor='blue'}} ></View>
</View>

これらのビューが画面にどのように積み上げられるかがわかりますflexDirection: row( container.

于 2016-08-18T17:21:19.810 に答える