React Native 混合开发 mac环境部署

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u013667756/article/details/78193840

React Native 混合开发 mac环境部署

1. cd 需要放置的目录下（项目的根目录/项目中自己创建的文件夹）

$ touch package.json

{
  "name": "JMS_New",//此处替换你的项目名称
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "15.4.1",// react版本，可以替换成最新的。
    "react-native": "0.42.0"// 同上，目前最新0.42.0
  }
}

在这里可以react-nativa init Project 一个新项目，然后将里面的package.json拷贝过来

2. cd 项目的根目录/项目中自己创建的文件夹

$ npm install

3.$ cd 项目的根目录/项目中自己创建的文件夹

$ touch 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 JMS_New 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('JMS_New', () => JMS_New);

4.修改Podfile

# 最低适配的版本
platform :ios, "11.0"
use_frameworks!
# target的名字一般与你的项目名字相同
target 'JMS_New' do

  # 'node_modules'目录一般位于根目录中
  # 但是如果你的结构不同，那你就要根据实际路径修改下面的`:path`
#记得此处的路径，如果你有创建一个新的文件夹存放这些文件，前面要加上你文件夹的名字：'../RNComponent/node_modules/react-native'，如果没有，直接如下创建即可。
  pod 'React', :path => './文件名(同上)/node_modules/react-native', :subspecs => [
    'Core',
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # 这个模块是用于调试功能的
    # 在这里继续添加你所需要的模块
  ]
 # 如果你的RN版本 >= 0.42.0，请加入下面这行
# 该版本号是package.json中的“dependencies”字典下面的“react-native”后面对应的内容
  pod "yoga", :path => "./文件名(同上)/node_modules/react-native/ReactCommon/yoga"
end

5.安装React-Native pod

pod install

安装如下图所示

6.安装成功，在IOS项目中进行初始化配置

首先导入RCTRootView.h头文件

// #import "RCTRootView.h"，更新之后，需要导入下面的头文件。
// 官网的评论下方也有说明，否则会提示RCTRootView.h文件不存在。
#import <React/RCTRootView.h>

viewDidload中加入代码

NSURL * jsCodeLocation = [NSURL
                           URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];
  RCTRootView *rootView =
    [[RCTRootView alloc] initWithBundleURL :jsCodeLocation
                         moduleName        : @"RNHighScores"
                         initialProperties :
                           @{
                             @"scores" : @[
                               @{
                                 @"name" : @"Alex",
                                 @"value": @"42"
                                },
                               @{
                                 @"name" : @"Joel",
                                 @"value": @"10"
                               }
                             ]
                           }
                         launchOptions    : nil];
  UIViewController *vc = [[UIViewController alloc] init];
  vc.view = rootView;
  [self presentViewController : vc animated:YES completion : nil];

7.配置info.plist

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

8.启动RN服务器

在上述文件夹目录下启动 npm start