React Native 常用命令

最近在写React Native的项目 在这里记录一下，推荐reactnative中文网。要养成良好的习惯，上图?

#从头开始

写项目肯定要舒适化项目对吧 react-native init MyReactNativeProject

提示：你可以使用--version参数创建指定版本的项目。 例如 react-native init MyReactNativeProject --version 0.39.2。注意版本号必须精确到两个小数点。

#####在模拟器上运行 当你完成了初始化React Native新项目后，就可以在项目目录下运行react-native run-ios来启动模拟器。如果一切配置都没有问题，应该很快就能看到你的应用在iOS模拟器上运行起来。 #####指定模拟的设备类型 你可以使用--simulator 参数，在其后加上要使用的设备名称来指定要模拟的设备类型（目前默认为"iPhone 6"）。如果你要模拟iPhone 4s，那么这样运行命令即可： react-native run-ios --simulator "iPhone 4s"。 你可以在终端中运行 xcrun simctl list devices 来查看具体可用的设备名称。 #####在设备上运行 你可以在真机上访问开发服务器以快速测试和迭代。首先需要确保设备已使用usb连接至电脑，同时和电脑处在同一wifi网络内，然后在Xcode中选择你的设备作为编译目标（左上角运行按钮的右边），然后点击运行按钮即可。如果你需要在真机上启用调试功能，则需要打开RCTWebSocketExecutor.m文件，然后将其中的"localhost"改为你的电脑的IP地址，最后启用开发者菜单中的"Debug JS Remotely"选项。

#####项目的时候我们肯定会用到别人造好的轮子对吧就是所谓的三方库How to use?

 npm install 库的名称 —save
复制代码

// 生产环境需要的库 会在package.json文件中的dependencies中记录来链接库

 npm install 库的名称 --save-dev 
复制代码

// 开发环境下的库 会在package.json文件中的devDependencies中记录来链接库

react-native link 
复制代码

// 完成了！现在所有的原生依赖都成功地链接到你的iOS/Android项目了。

######提示：有写三方库是不需要link的 有写三方库link不成功，需要自己手动添加。

#####项目写完了是不是要打包？

开发React Native的过程成,js代码和图片资源运行在一个Debug Server上，每次更新代码之后只需要使用command+R键刷新就可以看到代码的更改，这种方式对于调试来说是非常方便的。 但当我们需要发布App到App Store的时候就需要打包,使用离线的js代码和图片。这就需要把JavaScript和图片等资源打包成离线资源，在添加到Xcode中，然后一起发布到App Strore中。 打包离线资源需要使用命令 react-native bundle

React Native的react-native bundle 命令是用来进行打包的命令， react-native bundle 的详细命令选项github.com/facebook/re…。 其中我们常使用的一线命令选项： --entry-file ,ios或者android入口的js名称，比如index.ios.js --platform ,平台名称(ios或者android) --dev ,设置为false的时候将会对JavaScript代码进行优化处理。 --bundle-output, 生成的jsbundle文件的名称，比如./ios/bundle/index.ios.jsbundle --assets-dest 图片以及其他资源存放的目录,比如./ios/bundle

打包命令如下:

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

打包的时候注意先在ios文件夹下创建一个build文件夹

为了方便使用，也可以把打包命令写到npm script中:

    "scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"bundle-ios":"node node_modules/react-native/local-cli/cli.js bundle --entry-file index.ios.js  --platform ios --dev false --bundle-output ./ios/bundle/index.ios.jsbundle --assets-dest ./ios/bundle"
  },
复制代码

然后运行命令直接打包:

  npm run bundle-ios
复制代码

####jsCodeLocation

在ios中AppDelegate里可以看到设置JavaScript代码位置的代码： Debug Server上的设置

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

        RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                  moduleName:@"FreshqiaoReact"
                                           initialProperties:nil
                                               launchOptions:launchOptions];
复制代码

在开发的过程中可以在这里配置Debug Server的地址，当发布上线的时候，就需要使用离线的jsbundle文件，因此需要设置jsCodeLocation为本地的离线jsbundle。 设置离线的jsCodeLocation:

   jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"bundle/index.ios" withExtension:@"jsbundle"];
复制代码

离线包里的.jsbundle文件是经过优化处理的，因此运行效率也会比Debug的时候更高一些。

#####如果报错

RCTSRWebSocket.m报错，需要在报错的错误处SecRandomCopyBytes(kSecRandomDefault, sizeof(uint32_t), (uint8_t*)mask_key)做处理，只需在该处加上(void)即可。如下：(void)SecRandomCopyBytes(kSecRandomDefault, sizeof(uint32_t), (uint8_t *)mask_key);

处理 RCTSRWebSocket.m还是不行。还需要在RCTScrollView.m 做出修改

@implementation RCTCustomScrollView

{

__weak UIView *_dockedHeaderView;

RCTRefreshControl *_refreshControl; //加入此行

}

不然会报 Use of undeclared identifier '_refreshControl'; did you mean 'refreshControl'?错误，RCTScrollView.m 位于Xcode项目中libraries下React.xcodeproj / React / View

###运行github上的项目 npm install -g React-native-cli  npm install react-native start