{

  "name": "yy", // 项目名称

  "version": "0.0.1",

  "private": true,

  "scripts": {

    "start": "node node_modules/react-native/local-cli/cli.js start",

    "test": "jest"

  },

  "dependencies": {

    "react": "16.8.3",

    "react-native": "0.59.9"

  },

  "devDependencies": {

    "@babel/core": "7.4.5",

    "@babel/runtime": "7.4.5",

    "babel-jest": "24.8.0",

    "jest": "24.8.0",

    "metro-react-native-babel-preset": "0.54.1",

    "react-test-renderer": "16.8.3"

  },

  "jest": {

    "preset": "react-native"

  }

}

// 到对应的目录中

cd xxx/ReactComponent

// 初始化 package.json

npm install 

/*

*

* Sample React Native App

* jff

*

*/

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 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',

        marginBottom:10,

        color:'#333333'

    }

})

// 注册组件

AppRegistry.registerComponent('rn', ()=>NativeRnApp);

# 如果导入react-navigation 和 react-native-gesture-handler 需要在Podfile中导入RNGestureHandler 否则会报 null is not an object (evaluating '_rngeasturhandlemodule.default.direction'
# RCTLinkingIOS 用于链接原生module 否则会报 Native Moudle is NULL
# RCTAnimation 导入动画，否则会有警告
# DevSupport 用于调试支持
platform :ios, '9.0'

target 'iOSRN' do
    pod 'yoga', :path => './ReactComponent/node_modules/react-native/ReactCommon/yoga'
    pod 'React', :path => './ReactComponent/node_modules/react-native', :subspecs => [
        'Core',
        'DevSupport',
        'CxxBridge',
        'RCTActionSheet',
        'RCTGeolocation',
        'RCTImage',
        'RCTNetwork',
        'RCTPushNotification',
        'RCTSettings',
        'RCTText',
        'RCTVibration',
        'RCTWebSocket',
        'RCTLinkingIOS',
        'RCTAnimation'
    ]
    pod 'RNGestureHandler', :path => './ReactComponent/node_modules/react-native-gesture-handler'
    pod 'DoubleConversion', :podspec => './ReactComponent/node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
    pod 'glog', :podspec => './ReactComponent/node_modules/react-native/third-party-podspecs/glog.podspec'
    pod 'Folly', :podspec => './ReactComponent/node_modules/react-native/third-party-podspecs/Folly.podspec'
end

<key>NSAppTransportSecurity</key>

<dict>

    <key>NSAllowsArbitraryLoads</key>

    <true/>

</dict>

//

//  ReactViewController.h

//  yy

//

//  Created by jisa on 2019/6/24.

//  Copyright © 2019 jff. All rights reserved.

//

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface ReactViewController : UIViewController

@end

NS_ASSUME_NONNULL_END

//

//  ReactViewController.m

//  yy

//

//  Created by jisa on 2019/6/24.

//  Copyright © 2019 jff. All rights reserved.

//

#import "ReactViewController.h"

// 导入需要的组件

#import <React/RCTRootView.h>

@interface ReactViewController ()

@end

@implementation ReactViewController

- (void)viewDidLoad {

    [super viewDidLoad];

    // Do any additional setup after loading the view. local

    NSString * strUrl = @"http://localhost:8081/index.ios.bundle?platform=ios&dev=true";

    NSURL * jsCodeLocation = [NSURL URLWithString:strUrl];

    RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation

                                                         moduleName:@"rn"

                                                  initialProperties:nil

                                                      launchOptions:nil];

    self.view = rootView;

}

@end