一、环境配置
不多说,直接参考RN中文网:http://reactnative.cn/docs/0.47/getting-started.html#content
二、关于IDE
1.笔者刚开始使用的Atom+Nuclide组建,弄了两天,只能用两个字失望来表达我此时的心情。原因如下:如果想让Atom里检测到JS的语法, 要人工对flow版本进行控制。其次是提示弱+定义跳转困难。配了半天,各种不能用。
2.推荐开发工具:WebStorm。配置简单,提示功能强大,语法跳转准确。参考资料为:http://blog.csdn.net/shan1991fei/article/details/53507895
但是两个IDE目前都不能直接Debug,需要借助Chrome浏览器进行调试,不知道这个怎么破...
三、index.ios 中JS模块如何在Native中使用
通常index.ios.js中都有如下定义:
AppRegistry.registerComponent('BlinkAppxxx', () => BlinkApp);
其中,通过AppRegistry注册的js模块能让Native感知到,通过如下方式:
NSURL *jsCodeLocation;
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"BlinkAppxxx"
initialProperties:nil
launchOptions:launchOptions];
其中,BlinkAppxxx是个字符串,是可以任意变换的,如JS端换成
AppRegistry.registerComponent('xxx', () => BlinkApp),在Native端做如下改动即可:
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"xxx"
initialProperties:nil
launchOptions:launchOptions];
四、关于npm start 的理解
npm start 是通过运行node_modules/react-native/local-cli/cli.js start 来启动一个本地服务器,因为默认使用8081端口,因此,如不做特殊处理,本地只能有一个node 服务器运行。只有当node服务器建好,我们才可以通过模拟器调试。大致的流程是:
node(localhost:8081)服务(通过执行 npm start启动)->将index.ios.js里相关联的JS依赖打包
本地模拟器-> moduleName->node服务器打好的JSBundle中寻找moduleName
五、关于yarn或者npm
yarn 或者 npm 相当于Xcode项目中的cocoapods, 是node的包管理工具。在实际运行的时候,如果少一些依赖,可以进入到项目目录中把依赖的第三方库添加进来,通常做法如下:
yarn add xxxxxx
npm install xxxxxx,
添加完依赖后,Command+R直接调试即可。
六、从github上下载的RN Demo如何运行?
demo中通常会有package.json,这个相当于cocoaspod中的podfile。执行的方式也类似:
进入Demo所在的目录,执行npm install,就会根据package.json的依赖生成好
node_modules,然后就可以运行Demo了。
七、为什么Demo运行的好好的,通过自己的App载入就会出错?
通常是因为Demo 和 App使用的RN版本库不一致导致的,解决这个问题的方式是通过
react-native init MyRNApp --version 0.44.3 (假如你的App使用的RN版本是0.44.3)创建一个指定版本的RN项目,然后把Demo中的代码移植到刚创建的MyRNApp中。然后使用新创建的项目进行调试,如果能通过,则App中也能通过。
当然,你也可以修改一下Demo的package.json,将dependencies 中的react-native中的版本修改成你App使用的RN版本,然后重新执行 npm install。
"dependencies": {
"react": "16.0.0-alpha.6",
"react-native": "0.43.3",
"react-native-elements": "^0.11.1",
"react-native-vector-icons": "^4.0.1"
},
参考资料:
http://reactnative.cn/docs/0.47/getting-started.html#content
http://blog.csdn.net/shan1991fei/article/details/53507895