美文网首页
React Native 常用命令

React Native 常用命令

作者: iOSTbag | 来源:发表于2017-05-15 17:35 被阅读951次

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

    u=3193006289,3802606706&fm=23&gp=0.jpg

    从头开始

    写项目肯定要舒适化项目对吧
    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
    的详细命令选项https://github.com/facebook/react-native/blob/master/local-cli/bundle/bundleCommandLineArgs.js
    其中我们常使用的一线命令选项:
    --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

    相关文章

      网友评论

          本文标题:React Native 常用命令

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