配置RN 文件

新建文件加 (项目名称)
在项目根目录下创建一个名为package.json

{
 "name": "项目名字",
 "version": "0.0.1",
 "private": true,
 "scripts": {
   "start": "node node_modules/react-native/local-cli/cli.js start"
 }
}

cd到目录
yarn add react-native
注意：warning "react-native@0.52.2" has unmet peer dependency "react@16.2.0".
查看有类似这句话的需要滚动到上面。指定版本高了或者低了都不可以。
yarn add react@16.2.0

根目录下创建 index.js App.js app.json

app.json 文件
{
  "name": "HelloIos",
  "displayName": "HelloIos"
}

index.js 文件
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName,() => App);

App.js 文件
import React, {Component} from 'react';
import {Platform,
    StyleSheet,
    Text,
    View, 
} from 'react-native';
export default  class LPW extends  Component{
    render(){
        return (
            <View style={{flex:1, alignItems:'center',justifyContent:'center'}}> 
            <Text>Hello World</Text>
            </View>
        );
    } 
}

RN 文件已经配置好了

IOS 配置

在项目的根目录创建 ios 文件利用xcode 创建IOS项目

336AA930-23C4-4D7E-B7A9-A88600AB7780.png

配置项目 cocoapod cd到项目的ios文件夹
vim PodFile
把下面内容负责到里面 ./是当前目录 ../是父级目录 /是根目录

 # target的名字一般与你的项目名字相同
target '项目名字' do

  # 'node_modules'目录一般位于根目录中
  # 但是如果你的结构不同，那你就要根据实际路径修改下面的`:path`
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge', # 如果RN版本 >= 0.47则加入此行
    'DevSupport', # 如果RN版本 >= 0.43，则需要加入此行才能开启开发者菜单
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # 调试功能需要此模块
    'RCTAnimation', # FlatList和原生动画功能需要此模块
    # 在这里继续添加你所需要的其他RN模块
  ]
  # 如果你的RN版本 >= 0.42.0，则加入下面这行
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

  # 如果RN版本 >= 0.45则加入下面三个第三方编译依赖
  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

end

复制完需要
pod install

导入头文件
#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
跳转代码 
NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios&dev=true"]; 
    RCTRootView *rootView =
    [[RCTRootView alloc] initWithBundleURL: jsCodeLocation
                                moduleName: @"HelloIos"
                         initialProperties:nil
                             launchOptions: nil];
    
    UIViewController *vc = [[UIViewController alloc] init];
    vc.view = rootView;
    [self.navigationController pushViewController:vc animated:YES];

注意2点：
RN服务器必须开启：
cd 到根目录 npm start

xcode默认不支持 HTTP 需要在info.plist下增加以下配置

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

命令行运行ios项目 react-native run-ios
关闭RN服务器运行命令 killall -9 node

开启服务器运行命令 npm start

项目文件结构