RN 初探

作者: jiayoubaobao | 来源:发表于2017-09-13 13:46 被阅读91次

    一、环境配置
    不多说,直接参考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

    相关文章

      网友评论

          本文标题:RN 初探

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