最近在忙着开发app,一直没写文章,今天有空整理记录一下app在开发中遇到的一些问题,部分内容以demo截图展示,截图手机机型是iphone12。
问题1、不同屏幕分辨率布局不同。
这个问题是在不同机型调试后遇到的问题,例如一些mini机型,会有一部分内容显示不全的问题,这里通过使用Flexbox去解决,demo如下:
export default function Test(props) {
return (
<View style={styles.container}>
<View style={
{flex:1,backgroundColor:'green'}}></View>
<View style={
{flex:2,backgroundColor:'blue'}}></View>
<View style={
{flex:3,backgroundColor:'red'}}></View>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
},
})
例如上面的代码,绿色盒子设置flex:1,蓝色盒子设置flex:2,红色盒子设置flex:3;表示的意思是绿色盒子占整体的1/6比例,蓝色盒子占整体的2/6比例,红色盒子占整体的3/6比例。
问题2、遇到刘海屏遮盖问题。
使用SafeAreaView标签嵌套组件可以解决刘海屏遮盖问题。
export default function Test(props) {
return (
<SafeAreaView style={styles.container}>
<View style={
{flex:1,backgroundColor:'green'}}></View>
<View style={
{flex:2,backgroundColor:'blue'}}></View>
<View style={
{flex:3,backgroundColor:'red'}}></View>
</SafeAreaView>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
},
})
问题3、选中输入框,呼出的键盘遮挡输入框问题。
使用KeyboardAvoidingView包裹组件可以解决。
export default function Test(props) {
return (
<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? "position" : "height"} >
//你的组件
</KeyboardAvoidingView>
)
}
问题4、点击空白处无法收回键盘。
使用TouchableOpacity包裹你的组件并且添加onPress事件,调用Keyboard.dismiss方法,就可点击空白处关闭键盘
export default function Test(props) {
return (
<TouchableOpacity activeOpacity={1.0} onPress={Keyboard.dismiss}>
<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? "position" : "height"} >
//你的组件
</KeyboardAvoidingView>
</TouchableOpacity>
)
}