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

iOS 嵌入React Native 0.55版本

猜你喜欢