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