ios集成react-native步骤

1、搭建开发环境。可参考  https://reactnative.cn/docs/getting-started/

2、然后使用xcode创建一个project文件

3、在项目根目录下创建文件夹如 ：react

4、在react文件夹下创建package.json文件

{

  "name": "MyReactNativeApp",

  "version": "0.0.1",

  "private": true,

  "scripts": {

    "start": "node node_modules/react-native/local-cli/cli.js start"  }

}

在react文件夹下安装react-native

npm install

5、在iOS项目目录下面创建Podfile文件内容如下

# target的名字一般与你的项目名字相同

target 'NumberTileGame' do 

 # 'node_modules'目录一般位于根目录中 

# 但是如果你的结构不同，那你就要根据实际路径修改下面的`:path` 

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

    'Core',

    'CxxBridge', # 如果RN版本 >= 0.47则加入此行    'DevSupport', # 如果RN版本 >= 0.43，则需要加入此行才能开启开发者菜单    'RCTText',

    'RCTNetwork',

    'RCTWebSocket', # 调试功能需要此模块    'RCTAnimation', # FlatList和原生动画功能需要此模块    # 在这里继续添加你所需要的其他RN模块  ]

  # 如果你的RN版本 >= 0.42.0，则加入下面这行  

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

# 如果RN版本 >= 0.45则加入下面三个第三方编译依赖  

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

在根目录下执行  pod install

关于报错：

No podspec found for `Yoga` in `./node_modules/react-native/ReactCommon/yoga/Yoga.podspec`

上边的Podfile文件中没有添加  pod "Yoga", :path => "#{react_native_path}/ReactCommon/yoga”，或者是该路劲不对

No podspec found for `React` in `../node_modules/react-native`

上边的Podfile文件中 pod "React", :path => react_native_path, :subspecs =>[ ]; path可能不对

path路径不对

6、使用react-native bundle制作离线包

react-native bundle --entry-file index.js --bundle-output ./ios/NativeForIos/main.jsbundle --platform ios --assets-dest ./ios/NativeForIos --dev false     

NativeForIos为iOS项目名

关于报错：

Unable to resolve module `scheduler` from `/Users/zhangheng/Desktop/RNHybrid/node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-prod.js`: Module `scheduler` does not exist in the Haste module map

This might be related to https://github.com/facebook/react-native/issues/4968

To resolve try the following:

  1. Clear watchman watches: `watchman watch-del-all`.

  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.

  3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.

  4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.

RN版本问题，生成的离线宝有问题。可以降低RN版本，重新生成即可。

界面报错 终端和Xcode报错