iOS 嵌入React Native 0.55版本

之前配置过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' end

3、创建RNComponent目录 cd RNComponent

4、初始化node_modules brew install yarn yarn add react-native

yarn add react@16.3.1

{

"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];