之前配置過RN，但是新版本有些東西變了。重新配置了一下，記錄一下過程

ref:

https://facebook.github.io/react-native/docs/integration-with-existing-apps

https://www.jianshu.com/p/a133d7e45aed

https://www.jianshu.com/p/284e05eba766

1、建立xcode project

2、pod init
platform :ios, '9.0'
target 'RNDemo' do
  # Uncomment the next line if you're using Swift or would like to use dynamic frameworks
  # use_frameworks!
  platform :ios, '9.0'
  # Pods for RNDemo
  # Your 'node_modules' directory is probably in the root of your project,
  # but if not, adjust the `:path` accordingly
  pod 'React', :path => 'RNComponent/node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge', # Include this for RN >= 0.47
    'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # Needed for debugging
    'RCTAnimation', # Needed for FlatList and animations running on native UI thread
    # Add any other subspecs you want to use in your project
  ]
  # Explicitly include Yoga if you are using RN >= 0.42.0
  pod 'yoga', :path => 'RNComponent/node_modules/react-native/ReactCommon/yoga'
end3、建立RNComponent目錄
cd RNComponent
4、初始化node_modules
brew install yarn
yarn add react-native

yarn add

[email protected]

{ "dependencies": { "react": "16.3.1", "react-native": "^0.55.4" }}

建立index.ios.js檔案
import React from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';


class RNHighScores extends React.Component {
  render() {
    var contents = this.props['scores'].map((score) => (
      <Text key={score.name}>
        {score.name}:{score.value}
        {'\n'}
      </Text>
    ));
    return (
      <View style={styles.container}>
        <Text style={styles.highScoresTitle}>2048 High Scores!</Text>
        <Text style={styles.scores}>{contents}</Text>
      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
  },
  highScoresTitle: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  scores: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});


// Module name
AppRegistry.registerComponent('RNHighScores', () => RNHighScores);


5、pod install建立workspace
sudo xcode-select --switch /Applications/Xcode.app
xcrun -k --sdk iphoneos --show-sdk-path
pod install


6、啟動react-native
yarn global add react-native-cli
react-native start

這樣http://localhost:8081/index.ios.bundle?platform=ios 就可以訪問了

7、配置NSTemporaryExceptionAllowsInsecureHTTPLoads

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

/> </dict> </dict> </dict>

8、RCTRootView當做UIView就可以執行
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];