• RN开发的遇到的一些问题总结


      1.首先是新项目npm install, 不能运行cnpm install ,那样会导致目录不对,安装文件在.npminstall的隐藏文件夹下,并且是软连接,然后运行会出现头文件找不到

      2.rn 打包离线包 https://segmentfault.com/a/1190000004189538

      react-native bundle --entry-file index.ios.js --bundle-output ./ios/bundle/index.ios.jsbundle --platform ios --assets-dest ./ios/bundle --dev false

        改下oc里

      jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];  //开发时使用
    // jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"index.ios" withExtension:@"jsbundle"]; //added by john,使用打包的离线包

      3.jsx render()方法下html直接注释有问题

          4.sublime打开项目的时候,不能在根目录npm run start,一直报事件流错误,然后导致在xcode里运行的时候会出现bundle是nill,这个可能和个人编辑器有关.

          5.当fetch数据时候直接报 Network request failed,而网络是好的时候,看看xcode里的错误信息,是不是http被block了,在Xcode下plist文件里改下配置Allow Arbitrary Loads设置成YES就好

      6.注意箭头函数的this指针,这个是es6的语法,我定义的一个模块Util,像下面这样使用 

     let Util = {
            fn1:()=>{
            ...
             },
            fn2:()=>{
          this.fn1() //错误
          Util.fn1() //正确
             }
      }

      7.AsyncStorage这是个异步进行存取值的对象,setItem和getItem返回的是个promise,像下面这样是取不到值的

             let  varifyTime = Util.storageGetItem('varifyTime')
             let  varifyCode = Util.storageGetItem('varifyCode')    

    只能在then里的回调取,但是那样你就只能把处理放在then的回调里面。比如我要取两个保存在AsyncStorage下的值,只有这两个值都有了,才能进行签名

    Util.storageGetItem('varifyTime').then(function(varifyTime){
            let varifyTime = varifyTime;
            Util.storageGetItem('varifyTime').then(function(varifyCode){
               let varifyCode = varifyCode
               let encryptstr = Util.encrypt(varifyCode,varifyTime); //这里是去签名 
    })
    })

     疯了,两层嵌套

      可以使用 async/await来同步异步返回,就像下面

    Sign:async(data) => {
            let dataStr = JSON.stringify(data)
            let varifyTime = await Util.storageGetItem('varifyTime');
            let varifyCode = await Util.storageGetItem('varifyCode');
             let encryptstr = Util.encrypt(varifyCode, varifyTime);
    }

     这样就清楚多了

      8.这个其实和RN无关,是http请求的东西,http,要么get,直接url,post的话有表单和Json格式,如下两种

    /**
         * http表单请求方式,包括成功及失败的回调
         * @param url
         * @param data
         * @param successCallback
         * @param failCallback
         */
        httpPostForm: (url, data, successCallback, failCallback) => {
            console.log('tag', '请求地址=' + url);
            fetch(url, {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    body: data + ''
                })
                .then((response) => response.text())
                .then((responseText) => {
                    let result = JSON.parse(responseText);
                    if (result.msg_code === '9004') {
                        console.log('success: ' + responseText);
                        successCallback(result.result);
                    } else {
                        console.log('fail: ' + responseText);
                        failCallback(result.msg);
                    }
                })
                .catch((err) => {
                    console.log('err: ' + err);
                    failCallback(err);
                }).done();
        },
    View Code
    /**
         * http的json请求方式,包括成功及失败的回调
         * @param url
         * @param data
         * @param successCallback
         * @param failCallback
         */
        httpPostJson: (url, data, successCallback, failCallback) => {
            console.log('tag', '请求地址=' + url);
            fetch(url, {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(data)
                })
                .then((response) => response.text())
                .then((responseText) => {
                    let result = JSON.parse(responseText);
                    if (result.msg_code === '9004') {
                        console.log('success: ' + responseText);
                        successCallback(result.result);
                    } else {
                        console.log('fail: ' + responseText);
                        failCallback(result.msg);
                    }
                })
                .catch((err) => {
                    console.log('err: ' + err);
                    failCallback(err);
                }).done();
    
        },
    View Code

    但如果你表单请求时,你的参数要去拼接,'param1=' + param1 + '&' + 'param2='+ param2...,反正我是觉得不直观且麻烦,一般请求就是如下定义 

    data = {
             param1:param1,
             param2:param2,
             param3:param3,
            }

     AngularJS也是默认采用json格式传送数据,需要修改设置下httpProvider。

     写个下面的方法

    transFormparam :(obj) => {
            var query = '',
                name, value, fullSubName, subName, subValue, innerObj, i;
    
            for (name in obj) {
                value = obj[name];
                if (value instanceof Array) {
                    for (i = 0; i < value.length; i++) {
                        subValue = value[i];
                        fullSubName = name + '[' + i + ']';
                        innerObj = {};
                        innerObj[fullSubName] = subValue;
                        query += param(innerObj) + '&';
                    }
                } else if (value instanceof Object) {
                    for (subName in value) {
                        subValue = value[subName];
                        fullSubName = name + '[' + subName + ']';
                        innerObj = {};
                        innerObj[fullSubName] = subValue;
                        query += param(innerObj) + '&';
                    }
                } else if (value !== undefined && value !== null)
                    query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
            }
    
            return query.length ? query.substr(0, query.length - 1) : query;
        },
    View Code

        有了上面的方法,把上面的那个json参数data作为传入处理下就行了

      9. 运行出现Can't find 'node' binary to build React Native bundle 错误

       先which node,找到node路径,然后在Build Phases如下修改

      

      10. build & run的时候出现 'bundleURL must be non-nil when not implementing loadSourceForBridge'

        Product > Scheme > Edit Scheme > set run configuration to Release.

      

      如果要debug模式,这里还是改成debug,然后一定要在项目目录跑npm run start命令,也就是要起server

      11.

  • 相关阅读:
    java通过ftp和sftp上传war包上传到Linux服务器实现自动重启tomcat的脚本代码
    linux 下 nginx 启动服务器 80端口被占用问题
    ZooKeeper伪分布集群安装及使用 RMI+ZooKeeper实现远程调用框架
    nginx+tomcat+redis的集群+session共享
    java 实现mysql数据库导出
    SpringQtz 时间任务调度
    java.lang.OutOfMemoryError: Java heap space解决方法 (有问题咨询加微信)
    tomcat 大并发报错 Maximum number of threads (200) created for connector with address null and port 8080
    linux下安装svn
    Nginx 性能优化
  • 原文地址:https://www.cnblogs.com/johnzhu/p/6369934.html
Copyright © 2020-2023  润新知