旧工程如何集成React-Native

1、在工程下新建ios目录,并将ios相关文件拷贝到此目录中

2、新建package.json文件,文件内容如下:

{

  "name": "MyReactNativeApp",

  "version": "0.0.1",

  "private": true,

  "scripts": {

    "start": "yarn react-native start"  }

}

3、$ yarn add react-native

4、$ yarn add react@version_printed_above

5、如果安装cocoapod,并且有Podfile文件(没有的话自行安装创建),修改文件内容:

platform:ios,'9.0'

require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

target'你的工程名'do

pod 'React', :path => '../node_modules/react-native/'

  pod 'React-Core', :path => '../node_modules/react-native/React'

  pod 'React-DevSupport', :path => '../node_modules/react-native/React'

  pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'

  pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'

  pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'

  pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'

  pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'

  pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'

  pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'

  pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'

  pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'

  pod 'React-RCTWebSocket', :path => '../node_modules/react-native/Libraries/WebSocket'

  pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'

  pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'

  pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'

  pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'

pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'

pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'

pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

end

6、进入ios目录,pod install

7、新建index.js,开始你的编码

8、OC界面中

 NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];

    RCTRootView*rootView = [[RCTRootViewalloc]initWithBundleURL:jsCodeLocation


                                                        moduleName:@"你的工程名"


                                                 initialProperties:nil


                                                     launchOptions:nil];


    self.view= rootView;

你可能感兴趣的:(旧工程如何集成React-Native)