一、创建RN新项目
1、创建新项目
在安装好RN环境之后，执行如下命令
npx react-native init xxx项目名
复制代码找到项目的ios目录，将现有的swift项目拷贝到ios目录中
2、修改podfile文件
最新的RN项目中的podfile文件可以在下面这个链接上查看：
参考该文件并对自己的Podfile文件进行修改，如：
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
platform :ios, '11.0'
target 'SFDY_SHIPPER' do
pod 'BSText'
pod 'YYImage',:modular_headers => true #富文本
pod 'WechatOpenSDK' #微信SDK
config = use_native_modules!
use_react_native!(
:path => config[:reactNativePath],
# to enable hermes on iOS, change `false` to `true` and then install pods
:hermes_enabled => false
)
# Enables Flipper.
#
# Note that if you have use_frameworks! enabled, Flipper will not work and
# you should disable the next line.
use_flipper!()
post_install do |installer|
react_native_post_install(installer)
__apply_Xcode_12_5_M1_post_install_workaround(installer)
end
end
复制代码进入到ios目录下，执行pod install命令安装项目所需要的库
3、加载
在合适的地方加载bundle文件测试
比如可以放在appdelegate文件
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
// 测试RN项目
let moduleName: String = "sfdy_shipper_rn"
let jsCodeLocation:NSURL
jsCodeLocation = NSURL(string:"http://192.168.30.39:8081/index.bundle?platform=ios")!
let rootView = RCTRootView(bundleURL: jsCodeLocation as URL, moduleName: moduleName, initialProperties: nil, launchOptions: nil)
rootView.backgroundColor = UIColor.systemPink
let rootViewController = UIViewController()
rootViewController.view = rootView
window = UIWindow(frame: UIScreen.main.bounds)
window?.rootViewController = rootViewController
window?.makeKeyAndVisible()
return true
}
复制代码4、第一个页面
二、常见问题
问题1：
RCTStatusBarManager module requires that the UIViewControllerBasedStatusBarAppearance key in the Info.plist is set to NO
复制代码解决：
在info.plist中，添加View controller-based status bar appearance并设置为NO
问题2：
[!] /bin/bash -c
set -e
#!/bin/bash
set -e
PLATFORM_NAME="${PLATFORM_NAME:-iphoneos}"
CURRENT_ARCH="${CURRENT_ARCH}"
......(省略)
xcrun: error: SDK "iphoneos" cannot be located
xcrun: error: SDK "iphoneos" cannot be located
xcrun: error: SDK "iphoneos" cannot be located
xcrun: error: unable to lookup item 'Path' in SDK 'iphoneos'
/Users/galahad/Library/Caches/CocoaPods/Pods/External/glog/2263bd123499e5b93b5efe24871be317-e8acf/missing: Unknown `--is-lightweight' option
Try `/Users/galahad/Library/Caches/CocoaPods/Pods/External/glog/2263bd123499e5b93b5efe24871be317-e8acf/missing --help' for more information
configure: WARNING: 'missing' script is too old or missing
configure: error: in `/Users/galahad/Library/Caches/CocoaPods/Pods/External/glog/2263bd123499e5b93b5efe24871be317-e8acf':
configure: error: C compiler cannot create executables
See `config.log' for more details
复制代码解决：
执行下面命令：
$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer/
复制代码输入mac密码后重新安装
$ pod install
复制代码问题3：
Ensure the following:
- Node server is running and available on the same network - run 'npm start' from react-native root
- Node server URL is correctly set in AppDelegate
- WiFi is enabled and connected to the same network as the Node Server
URL: http://localhost:8081/index.bundle?platform=ios&dev=true Could not connect to the server.)
复制代码看手机的wifi应当和电脑连接的是同一个网络
打开偏好设置-网络-查看当前ip地址，将项目中的localhost改为当前ip
jsCodeLocation = NSURL(string:"http://192.168.30.39:8081/index.bundle?platform=ios")!
复制代码如果直接运行xcode无法运行，可以试试命令行
npm start
复制代码
react-native run-ios --device "手机名"
复制代码问题4： cocopods报错
一个很尴尬的事情。用RN混编swift的代码 如果加了use_frameworks!会报错
而方法是是去掉use_frameworks 但是去掉之后会报
解决方法是加上use_frameworks
解决：
先去除掉use_frameworks
# which 指代的 是 YYImage 即依赖的库
pod 'BSText'
pod 'YYImage',:modular_headers => true
复制代码问题5：react-native命令不生效
配置reactNative（RN）过程中 出现react-native：command not found 和 zsh: command not found: react-native