React-Native 中的基本布局技巧

相对布局

React Native 中，position 默认值为 relative，即相对布局。

• 如果父组件没有设置 flex 值，则子组件不论是否设置 flex ，子组件都不会显示在界面上

如下示例代码中，子组件会等比例的占满屏幕

return (
      <View style={{}}>
        <View style={{ flex: 1, backgroundColor: 'yellow' }}></View>
        <View style={{ flex: 1, backgroundColor: 'skyblue' }}></View>
        <View style={{ flex: 1, backgroundColor: 'lightgray' }}></View>
      </View >
    );

• 如果父组件设置了 flex 值，子组件设置了 flex 值的同时，也设置了高度值，则高度无效

如下示例代码中，子组件会等比例的占满屏幕，设置高度并不影响所占的比例

return (
      <View style={{
              flex: 1,
      }}>
        <View style={{ flex: 1, height: 90, backgroundColor: 'yellow' }}></View>
        <View style={{ flex: 1, backgroundColor: 'skyblue' }}></View>
        <View style={{ flex: 1, backgroundColor: 'lightgray' }}></View>
      </View >
    );

• 如果父组件设置了 flex 值，子组件没有设置 flex 值，只设置了高度值，则高度有效

如下示例代码中，子组件在界面所占的比例受高度控制，最后一个子组件则自动占满剩余空间

return (
      <View style={{
              flex: 1,
              backgroundColor: 'yellow',
      }}>
        <View style={{ height: 90, backgroundColor: 'yellow' }}></View>
        <View style={{ height: 90, backgroundColor: 'skyblue' }}></View>
        <View style={{ flex: 1, backgroundColor: 'lightgray' }}></View>
      </View >
    );

绝对布局

样式设置 position: 'absolute'

• 绝对布局情况下，设置 flex 不能达到页面整屏占满的效果，需要同时设置组件的宽高，否则父组件与子组件都将无法显示

正确设置父组件的样式方式

return (
      <View style={{
              position: 'absolute',
              backgroundColor: 'yellow',
              width: Dimensions.get('window').width,
              height: Dimensions.get('window').height
      }}>
        <View style={{ flex: 1, backgroundColor: 'yellow' }}></View>
        <View style={{ flex: 1, backgroundColor: 'skyblue' }}></View>
        <View style={{ flex: 1, backgroundColor: 'lightgray' }}></View>
      </View >
    );

• 只设置父组件的宽，设置子组件的高度有效，子组件的flex无效

如下示例代码中，只有第一个设置了高度的view会显示在界面上，而设置了flex的view不会显示

return (
      <View style={{
              position: 'absolute',
              backgroundColor: 'yellow',
              width: Dimensions.get('window').width,
      }}>
        <View style={{ height: 90, backgroundColor: 'yellow' }}></View>
        <View style={{ flex: 1, backgroundColor: 'skyblue' }}></View>
        <View style={{ flex: 1,  backgroundColor: 'lightgray' }}></View>
      </View >
    );

• 只设置父组件的高，则设置子组件的高度和flex均无效，父组件与子组件都无法显示

如下示例代码中，父组件与子组件都不会显示

return (
      <View style={{
              position: 'absolute',
              backgroundColor: 'yellow',
              height: Dimensions.get('window').height
      }}>
        <View style={{ height: 90, backgroundColor: 'yellow' }}></View>
        <View style={{ flex: 1, backgroundColor: 'skyblue' }}></View>
        <View style={{ flex: 1,  backgroundColor: 'lightgray' }}></View>
      </View >
    );

• 同时设置了父组件的宽和高的前提下，再设置子组件的高度和flex均有效

如下示例代码中，分别设置了高度和flex的view均会显示在界面上

return (
      <View style={{
              position: 'absolute',
              backgroundColor: 'yellow',
              width: Dimensions.get('window').width,
      }}>
        <View style={{ height: 90, backgroundColor: 'yellow' }}></View>
        <View style={{ flex: 1, backgroundColor: 'skyblue' }}></View>
        <View style={{ flex: 1, backgroundColor: 'lightgray' }}></View>
      </View >
    );

• 父组件与子组件同时绝对布局的情况下，且设置绝对布局的子组件写在最后一个时，保持原则一样，则父组件与子组件可正常显示

如下示例代码中，子组件均能正常显示，且设置了flex的view会将剩余的屏幕占满显示，不会被绝对布局的同级子view阻挡

return (
      <View style={{
              position: 'absolute',
              backgroundColor: 'yellow',
              width: Dimensions.get('window').width,
              height: Dimensions.get('window').height
      }}>
        <View style={{ height: 90, backgroundColor: 'yellow' }}></View>
        <View style={{ flex: 1, backgroundColor: 'skyblue' }}></View>
        <View style={{ position: 'absolute', width: Dimensions.get('window').width, height: 90, bottom: 90, backgroundColor: 'lightgray' }}></View>
      </View >

• 父组件与子组件同时绝对布局的情况下，且设置绝对布局的子组件没有写在最后一个时，保持原则一样，则绝对布局的子组件不会显示在父组件中，它会被前一个子组件覆盖

如下示例代码中，除相对布局的子组件能正常显示外，绝对布局的子组件会被同级的子view覆盖

return (
      <View style={{
              position: 'absolute',
              backgroundColor: 'yellow',
              width: Dimensions.get('window').width,
              height: Dimensions.get('window').height
      }}>
        <View style={{ height: 90, backgroundColor: 'yellow' }}></View>
        <View style={{ position: 'absolute', width: Dimensions.get('window').width, height: 90, bottom: 90, backgroundColor: 'lightgray' }}></View>
        <View style={{ flex: 1, backgroundColor: 'skyblue' }}></View>
      </View >
    );