React Native开发过程中遇到的问题整理

最近在忙着开发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>
    )
}