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了,在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();
    },

/**
     * 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();

    },

但如果你表单请求时,你的参数要去拼接,‘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;
    },

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

9 ....持续更新中

时间: 2024-12-14 06:50:03

RN开发的遇到的一些问题总结的相关文章

iOS原生混合RN开发最佳实践

做过原生iOS开发或者Android开发的同学们肯定也都了解Hybrid,有一些Hybrid的开发经验,目前我们企业开发中运用最广泛的Hybrid App技术就是原生与H5 hybrid,在早期的时候,可能部分同学也接触过PhoneGap等hybrid技术,今天我们就简单来聊下一种比较新的Hybrid技术方案,原生App与ReactNativie Hybrid,如果有同学们对React Native技术不熟悉的同学,可以查看作者简书中对React Native基础的讲解:React Native

基于RN开发的一款视频配音APP(开源)

在如今React.ng.vue三分天下的格局下,不得不让自己加快学习的脚步.虽然经常会陷入各种迷茫,学得越多会发现不会的东西也被无限放大,不过能用新的技术作出一些小项目小Demo还是会给自己些许自信与接着学习的动力. 项目部分展现 项目源码地址     项目简介 1. APP后端搭建: 使用NodeJs的koa框架完成APP后端的搭建; 使用mongodb完成数据存储,通过mongoose模块完成对mongodb数据的构建; 2. APP前端搭建: 使用RN组件式架构.JS类库实现快速开发 采用

RN开发-Linux开发环境搭建(Ubuntu 12.04)

1.首先安装JDK 2.安装Android开发环境 3.安装node.js 3.1 官网下载 : node-v6.9.1-linux-x64 3.2 添加环境变量 sudo vi /etc/profile 添加如下内容: export NODE_HOME=/home/xxx/ReactNative/node-v6.9.1-linux-x64 export PATH=$PATH:$NODE_HOME/bin export NODE_PATH=$NODE_HOME/lib/node_modules

React Native开发环境配置(转)

转自:http://www.jianshu.com/p/cd2a8c5ee1c7 到如今React Native已经进化了很多版本,开发环境的配置也发生了一些改变,本文仅供参考,请按照官方指引配置,防止某些细节出入导致配置失败.官方英文版配置说明 React Native(以下简称RN)的开发环境配置直接参考官方文档即可完成,不过对小白来说东西有点多,有些名词不是很好理解,这里就官方的安装文档稍微展开说一下. 中文版配置说明:这个版本来自极客学院的翻译版,不过和官方的版本相比略有滞后,不过照着安

在Mac上搭建React Native开发环境

概述 前面我们介绍过在window环境下开发React Native项目,今天说说怎么在mac上搭建一个RN的开发环境. 配置mac开发环境 基本环境安装 1.先安装Homebrew:用于安装NodeJS和其他工具. 注:Homebrew详解,对这个比较了解的略过,我也是用mac没多久,这里给小白普及下. Homebrew全称Homebrew is the easiest and most flexible way to install the UNIX tools Apple didn't i

带你从零学ReactNative开发跨平台App开发(一)

首先自我介绍一下,本人鸟窝,现在就职于xx共享汽车,担任主程,目前用的技术栈是.net core+angular. 今天我讲的是关于ReactNative从零基础开发,希望可以对入门的新手,起到一个指导作用. 目前学习React Native跨平台开发的人员比较多,干ReactNative开发的程序员,转行过来的也比较多,之前就有遇到过,比如:干前端的,干Android/IOS的,干后台的(C#,Go,Java...PHP),发现一个很有趣的现象,我公司同事干PHP的,一次偶然,我发现他尽然学起

Expo大作战--expo的生命周期,expo社区交流方式,expo学习必备资源,开发使用expo时关注的一些问题

简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo依赖,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人修改补充+demo测试的形式,对expo进行一次大补血!欢迎加入expo兴趣学习交流群:597732981 [之前我写过一些列关于expo和rn入门配置的东i西,大家可以点击这里查看:从零学习rn开发] 相关文章: Expo大作战--什么是expo,如何安装expo clinet和xde,xde如何

Expo大作战--针对已经开发过react native项目开发人员有针对性的介绍了expo,expo的局限性,开发时项目选型注意点等

简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo依赖,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人修改补充+demo测试的形式,对expo进行一次大补血!欢迎加入expo兴趣学习交流群:597732981 [之前我写过一些列关于expo和rn入门配置的东i西,大家可以点击这里查看:从零学习rn开发] 相关文章: Expo大作战--什么是expo,如何安装expo clinet和xde,xde如何

转转RN工程化历程

选型RN理由? 目前各大公司技术栈都是native端(android,iOS)以及H5端,然而这两大传统的开发方式都各有优缺点,下面表格简单汇总一下. - native端 web端 RN 开发效率 低 高 中 性能 高 低 高 灵活性 低 高 高 接入成本 高 低 低 从上面表格中可以看出native端高性能的代价是低开发效,低灵活性以及接入的高成本,主要归咎于需要同时开发android和iOS两套代码,而且上线成本高.H5的开发方式,受限于webView容器的瓶颈,在页面体验上和native有