美文网首页react nativeReact Native开发经验集
最近reactNative在开发android中遇到的坑

最近reactNative在开发android中遇到的坑

作者: Dony | 来源:发表于2017-06-13 16:32 被阅读158次

    首先说一下我的ReactNative的版本是0.43.4,Android6.0(华为荣耀6Plus),以下遇到的坑,在最新版的RN中没测试是否还存在,不过按照Facebook的团队习惯,我估计还是没修复的。

    一、Textinput

    1、android下相同高度的输入框高度比ios下高。

    android平台上,在padding没指定时,通过Toggle Inspector可以发现TextInput的padding明明是0(见下图1),但实际并非如此,paddingVertical必须指定为0。

    Android下发现输入框高度莫名其妙异常 将paddingVertical设为0后,正常了

    2、onContentSizeChange方法在初始化时会执行一次,后面就再也不执行,这样要实现输入框的自动高度就无法实现,只能通过在onChange方法中去实现

    onTextShouldChange(event) {
        lettext= event.nativeEvent.text;
        //TODO:ANDROID上onContentSizeChange不生效,需要通过onChange来
        if(Platform.OS=='android'){
            this.onContentSizeChange(event);
        }
    }
    onContentSizeChange(event) {
        let hei=Math.max(event.nativeEvent.contentSize.height,22*scale);
        this.setState({inputHei:Math.min(hei,136*scale)});
    }

    二、摄像头与相册读取

    android6.0及以上版本,在android/app/src/AndroidManifest.xml配置权限已不起作用,必须在代码中做权限判断

    示例:

    import{
        Platform,
        PermissionsAndroid
    } from'react-native';
    ....
    requestPermission(pname){
        if(Platform.OS=='ios'){
            return true;
        }
        try{
            let message='',title='';
            if(pname==PermissionsAndroid.PERMISSIONS.CAMERA){
                title= Di18n.tr('访问相机授权');
                message= Di18n.tr('需要允许使用您的相机才可拍照');
            }
            const  granted=awaitPermissionsAndroid.request(pname,{title,message});
            if(granted===PermissionsAndroid.RESULTS.GRANTED) {
                return true;
            }else{
                return false;
            }
        }catch(err) {
            console.log('requestPermission err',err);
            return false;
        }
    }

    componentDidMount(){
        this.requestPermission(this.permission).then((result)=>{
            if(result){
                //有权使用了
            }else{
                Toast.show(Di18n.tr('您没有授权,无法使用相机'));
            }
        });
    }

    三、View的overflow:hidden和borderRadius同用时,hold不住里面子component,所以当要实现图片圆角时,只能对View里面的子Component图片加borderRadius属性。

    BUG网址描述:

    https://github.com/facebook/react-native/issues/3198
    https://github.com/facebook/react-native/issues/8885

    相关文章

      网友评论

        本文标题:最近reactNative在开发android中遇到的坑

        本文链接:https://www.haomeiwen.com/subject/fejymttx.html