相对布局
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 >
);
