React Native学习笔记

nvm、npm和nodejs的关系:https://www.cnblogs.com/qqpw/p/6597295.html

 

JS的模块加载方案及ES6的import和export用法:https://www.cnblogs.com/dupd/p/5951311.html

 

export和module.exports的区别:

https://www.jianshu.com/p/e452203d56c4

 

介绍混合应用开发的好文:

1、《2017混合应用开发现状》:https://refined-x.com/2017/06/23/2017%E6%B7%B7%E5%90%88%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91%E7%8E%B0%E7%8A%B6/

 

关于使用ES6语法

React、ReactNative中的es5和es6中的写法对照:

https://www.cnblogs.com/kuailingmin/p/5476884.html

 

一个使用this时的知识点:

如果你在一个方法体定义中定义另一个方法体,嵌套在内测的方法体想使用外侧方法体的this时,需要在外侧方法体重先将this定义成别的名字的变量。

例子:

methodA=()=>{

     bla bla bla...

     let that = this;

     someClass.methodB(){

         that.setState({

    bla bla bla...

   });

     }

}

 

关于ES6写法的坑NO.1:

问题:我在使用ES6语法编写一个自定义class的内置自定义方法时,大部分这么写是OK的:

methodName(){

  bla bla bla...

}

直到我有一次在方法体代码中使用了this.setState时,编译开始死活报错,提示this.setState is undefined。

反复检查程序逻辑没问题,国内狗度搜索结果让人极度失望。想在网上查React Native的问题,必须得上神器。

解决办法:使用谷歌搜索,在stackoverflow上一位国外大神推荐在使用ES6时这样定义方法:

methodName=()=>{

  this.setState{

           bla bla bla...

      }

}

试了真的就tm可以了。。。

  而且,在我后续调试程序的过程中发现,凡是你打算在方法体中使用this关键字的,最好都用上面的定义方式,否则经常

会出现this或this.XXX取不到值的怪现象。真的是防不胜防啊!保险起见,所有方法都这么定义才最好。只有构造方法constructor()

不可以这么定义,会报错:Class may not have a non-static field named 'constructor'。可见,这种定义方式的使用范围

是当你定义一个non static field时才适用。

  当你定义一个static field时可以这样:

例如下面的例子是定义一个工具类,注意static的属性只能定义在class定义体之外,也就是大括号之外:

 

export default class Util extends Component{
// 屏幕尺寸
static windowSize = {
width: Dimensions.get("window").width,
height: Dimensions.get("window").height
};

 

// 基于fetch的get方法,只负责下载数据,下载后的处理操作在回调方法中实现
static getRequest(url,successCallback,failCallback){
fetch(url)
.then((response) => {return response.json();})
.then((responseData) => successCallback(responseData))
.catch((error) => failCallback(error));
};

 

// loading效果
// loading: <ActivityIndicator style={{marginTop:200}}/>
};
// loading效果
Util.loading = <ActivityIndicator style={{marginTop:200}}/>;

 

大神回答帖地址:https://stackoverflow.com/questions/39210971/this-setstate-is-undefined

ReactNative中的Navigator组件已经过时,该如何继续使用?

转自:https://blog.csdn.net/gl_mine_csdn/article/details/73740868

当要引入Navigator的使用通常的做法是:

import {Navigator} from "react-native"

当我们进行执行react native 程序的时候 告知我们 该组件已经不存在 :

 

[plain] view plain copy
 
  1. 'Navigator is deprecated and has been removed from this package. It can now be installed ' +  
  2.       'and imported from `react-native-deprecated-custom-components` instead of `react-native`. ' +  
  3.       'Learn about alternative navigation solutions at http://facebook.github.io/react-native/docs/navigation.html'  
  4.      


此时我们将要做的便是通过引用:

 

react-native-deprecated-custom-components 来导入 Navigator 组件

步骤如下:

1、打开程序的根目录(也就是和 Package.json 同级的目录)

2、使用cmd 命令工具 或者 Git Bash Here (前提是安装过GIT工具)  

      输入命令:    npm  install   react-native-deprecated-custom-components  --save 

(下载并保存,此时package.json 文件 中 便会增加一条对该库的引用代表成功)

3、在使用Navigator的地方引用便可使用。

引用方式:import {Navigator} from "react-native-deprecated-custom-components" 

注意:在引用时 一定在导入 Navigator的时候加上 {}  要不然会报错。

同时:当我在使用  npm  install   react-native-deprecated-custom-components  --save  时报错

解决方法:

使用命令: npm  i   react-native-deprecated-custom-components  --save 

如果此方法还不能解决。

解决方法:

使用yarn命令(前提是自己有yarn的配置环境)

使用命令:yarn add  react-native-deprecated-custom-components  --save 

最终解决Navigator的下载。

亲测:在mac上使用npm命令安装react-native-deprecated-custom-components包以后不行,使用yarn命令以后可以。

 

 

 

react native组件的生命周期

转自:https://www.race604.com/react-native-component-lifecycle/

 iOS真机测试设置步骤:

1、使用appleID创建开发者账号,生成描述文件

xcode偏好设置 > account > appleIDs点"+"按钮 > 输入id密码以后点manage certificats按钮 > +一个iOS开发者 > done

 

2、将待测工程跟你的开发者账号挂钩:

点击xcode中的工程名DoubanProject > 选中右侧general面板中的targets栏目DoubanProject,修改Bundle Identifier使其唯一,然后往下看,在team下拉框中选择自己的开发者账号,查看provisioning profile和signing certificate有没有值,没有就点retry,如果不行就查看bundle identifier是不是唯一的,直到这两个值正常 > 回到targets栏目选中DoubanProjectTests,查看Host Application和team设置对不对,不对就改正。

 

3、设置待测工程生成的jsbundle文件在你的iPhone里运行

(1)将你的iPhone连接mac电脑,并信任这台电脑。

(2)打开DoubanProject工程、DoubanProject文件夹下的AppDelegate.m文件,使用“//“注释掉原来的jsCodeLocation赋值语句,新建

jsCodeLocation = [NSURL URLWithString:@"http://192.168.2.105:8081/index.bundle?platform=ios&dev=true"];

其中192.168.2.105是局域网中mac电脑的ip,需要注意的是index.bundle这个写法,因为旧版本的react native模板是由index.ios.js启动,所以如果你使用的是旧版本的react native,此处要写index.ios.bundle。

(3)在xcode运行设备中选择你的iPhone(就是你在mac电脑里选不同手机型号来模拟画面的那个地方),点播放键运行。

(4)第一次运行时,在你的iPhone里自动安装完DoubanProject APP以后,运行会报错。先退出app,再进入手机的设置>通用>设备管理,信任自己的appleID,再重新使用xcode run一次即可。

posted on 2018-03-29 23:27  izumi  阅读(248)  评论(0编辑  收藏  举报

导航