美文网首页
xcode工程集成 React-native步骤

xcode工程集成 React-native步骤

作者: KeyboardLife | 来源:发表于2017-05-25 10:30 被阅读3625次

    跟着网上博客步骤来集成RN发现了很多坑,但是博客内容里面却没有记录这些坑,百度了很久都没找到解决方案,最后还是在谷歌搜索里面的一篇文章找到解决办法,在此记录下方便别人快速集成RN。


    1.搭建React-native环境

    • 安装Homebrew
      Homebrew主要用于安装watchman、flow
      打开mac终端,输入如下命令:

    ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

    • 安装nvm和node.js
      nvm是用于node.js版本管理的工具,用于安装node.js.
      可以用brew install nvm命令进行安装,也可以用如下命令:

    curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.26.1/install.sh | bash

    这个命令按照官方的说明,应该会自动配置好环境,能够在任何的终端中使用nvm命令,但是我安装完了事不可以的。需要做额外的工作,需要在~/.bashrc, ~/.profile, ~/.zshrc文件中(如果没有自己创建),添加如下的一行语句:

    . ~/.nvm/nvm.sh

    这样就能够在任意的终端中使用nvm命令了。
    然后执行如下的命令:

    nvm install node && nvm alias default node

    这个用于安装nodejs和npm。npm用于nodejs包依赖管理的工具。

    • 安装flow
      用于静态分析js语法错误的工具,能够更早的js的语法错误。执行如下的命令:

    brew install flow

    到这里基本的环境就配置好了,下面创建一个iOS的例子,在终端中将目录切换到你保存工程的目录,然后执行如下的命令:

    $ npm install -g react-native-cli
    $ react-native init AwesomeProject
    $ cd AwesomeProject/

    第二个命令第一次执行会执行很长时间,因为需要安装许多东西。然后再终端输入如下命令打开工程:

    open ios/AwesomeProject.xcodeproj

    这样就打开了iOS的工程,运行一下就能看到模拟器中的界面。
    下面试着修改index.ios.js中的文本,然后在模拟器上按Cmd+R,这样能够看到修改马上就呈现到模拟器上了。

    2.集成React-native

    • 新建一个xcode工程和添加配置文件
      新建一个文件夹NativeRNApp,再在该文件夹下新建一个name为NativeRNApp的Xcode工程,与xcode工程同目录新建一个name为ReactComponent的文件夹,在该文件夹下新建一个package.json文件,
    67B7EC5B-501A-4122-BE26-527E03CCBA64.png

    文件内容为:

    {
        "name": "NativeRNApp",
        "version": "0.0.1",
        "private": true,
        "scripts": {
            "start": "node node_modules/react-native/local-cli/cli.js start",
            "test": "jest"
        },
        "dependencies": {
            "react": "16.0.0-alpha.6",
            "react-native": "0.44.0"
        },
        "devDependencies": {
            "babel-jest": "20.0.3",
            "babel-preset-react-native": "1.9.2",
            "jest": "20.0.3",
            "react-test-renderer": "16.0.0-alpha.6"
        },
        "jest": {
            "preset": "react-native"
        }
    }
    

    注意name:改成自己项目工程名字。最好在终端下用react-native init新建一个react-native项目工程,将工程中的package.json文件内容拷贝进去:

    1.png

    -安装React-native依赖包
    在ReactComponent目录下运行命令行:

    npm install

    耐心等待几分钟,等命令执行完毕以后,ReactComponent目录里多了一个文件夹,如图:

    37111338-4C45-4201-A2A9-FCE2A97AAA47.png
    • 创建index.ios.js(js文件入口),如上图
      index.ios.js文件内容如下:
    /**
     * Sample React Native App
     * https://github.com/facebook/react-native
     * @flow
     */
    
    import React, { Component } from 'react';
    import {
      AppRegistry,
      StyleSheet,
      Text,
      View
    } from 'react-native';
    
    class NativeRNApp extends Component {
      render() {
        return (
          <View style={styles.container}>
            <Text style={styles.welcome}>
              Welcome to React Native!
            </Text>
            <Text style={styles.instructions}>
              To get started, edit index.ios.js
            </Text>
            <Text style={styles.instructions}>
              Press Cmd+R to reload,{'\n'}
              Cmd+D or shake for dev menu
            </Text>
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      },
      welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
      },
      instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
      },
    });
    
    //  项目名要有所对应
    AppRegistry.registerComponent('NativeRNApp', () => NativeRNApp);
    
    • cocoa pods集成React-native
      在NativeRNApp文件夹下新建Podfile文件,与xcode工程同目录,添加内容:
    pod 'React', :path => './ReactComponent/node_modules/react-native', :subspecs => [
      'Core',
      'RCTActionSheet',
      'RCTGeolocation',
      'RCTImage',
      'RCTNetwork',
      'RCTPushNotification',
      'RCTSettings',
      'RCTText',
      'RCTVibration',
      'RCTWebSocket'
      ]
    

    然后在根目录下执行pod更新命令:

    pod install

    报错:

    [!] Unable to find a specification for Yoga (= 0.42.3.React) depended upon by React/Core

    需要pod file手动添加yoga:

    pod 'Yoga', :path => './ReactComponent/node_modules/react-native/ReactCommon/yoga' 
      pod 'React', :path => './ReactComponent/node_modules/react-native', :subspecs => [
      'Core',
      'RCTActionSheet',
      'RCTGeolocation',
      'RCTImage',
      'RCTNetwork',
      'RCTPushNotification',
      'RCTSettings',
      'RCTText',
      'RCTVibration',
      'RCTWebSocket'
      ]
    
    

    pod install成功之后,运行项目报错:

    jschelpers/JavaScriptCore.h file not found

    将 Cocoapods 版本从 1.1.1 更新到 1.2.0 可以解决。

    3.原生项目处理

    1.新建一个ReactViewController继承UIViewController,专门管理react-native模块,代码内容如下:

    #import "ReactViewController.h"
    #import <RCTRootView.h>
    
    @interface ReactViewController ()
    
    @end
    
    @implementation ReactViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        // Do any additional setup after loading the view.
    
        NSString * strUrl = @"http://localhost:8081/index.ios.bundle?platform=ios&dev=true";
        NSURL * jsCodeLocation = [NSURL URLWithString:strUrl];
    
        RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                             moduleName:@"NativeRNApp"
                                                      initialProperties:nil
                                                          launchOptions:nil];
        self.view = rootView;
        //  也可addSubview,自定义大小位置
    }
    
    - (void)didReceiveMemoryWarning {
        [super didReceiveMemoryWarning];
        // Dispose of any resources that can be recreated.
    }
    
    @end
    

    2.配置App Transport Security
    打开工程中的 Info.list 文件,添加下面配置即可:

      <key>NSAppTransportSecurity</key>
      <dict>
        <key>NSExceptionDomains</key>
        <dict>
          <key>localhost</key>
          <dict>
           <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
           <true/>
          </dict>
        </dict>
      </dict>
    

    3.启动开发服务器

    在运行我们的项目之前,我们需要先启动我们的开发服务器。进入 reactnative目录 ,然后命令行启动服务:

    react-native start
    

    4.运行iOS项目

    启动工程,直接运行代码:

    ReactViewController * vc = [[ReactViewController alloc] init];

    [self.navigationController pushViewController:vc animated:YES];
    

    运行成功效果如下:

    屏幕快照 2017-05-25 上午10.27.01.png

    整个集成过程就是这样了。

    相关文章

      网友评论

          本文标题:xcode工程集成 React-native步骤

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