之前配置过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
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
cd RNComponent
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];