rn中没有fixed定位,更没有100%宽高;
我们可以Dimensions以及flex布局进行居中设置。。。
//1. 把要居中定位的组件用view包起来(下面的样式便是针对外层view所写);
//2. 使用时候,将整个组件放在所有使用页面根组件下;
//如:
水平居中:
width:Dimensions.get('window').width, //窗口宽度
justifyContent:'center',
alignItems:'center',
position:'absolute', //定位
垂直居中:
height:Dimensions.get('window').height, //窗口高度
justifyContent:'center',
alignItems:'center',
position:'absolute',
绝对居中:
height:Dimensions.get('window').height,
width:Dimensions.get('window').width,
justifyContent:'center',
alignItems:'center',
position:'absolute',
示例代码:
import React from 'react';
import {
ActivityIndicator,
View,
Text,
StyleSheet,
Dimensions,
} from 'react-native';
import colors from '../utils/color'
export default class Loading extends React.Component{
render(){
return(
<View style={loadStyles.wrapper}>
<View style={loadStyles.box}>
<ActivityIndicator
animating={true}
color={colors.white}
size='large'
/>
<Text style={loadStyles.txt}>数据加载中...</Text>
</View>
</View>
)
}
}
const loadStyles=StyleSheet.create({
wrapper:{
justifyContent:'center',
alignItems:'center',
position:'absolute',
height:Dimensions.get('window').height,
width:Dimensions.get('window').width,
zIndex:10,
},
box:{
paddingVertical:12,
paddingHorizontal:20,
flexDirection:'row',
justifyContent:'center',
alignItems:'center',
backgroundColor:'rgba(0,0,0,0.6)',
borderRadius:6
},
txt:{
marginLeft:20,
fontSize:14,
color:colors.white
}
})