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报错
网友评论