一、創(chuàng)建RN新項目
1、創(chuàng)建新項目
在安裝好RN環(huán)境之后，執(zhí)行如下命令
npx react-native init xxx項目名
找到項目的ios目錄，將現(xiàn)有的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目錄下，執(zhí)行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
解決：
執(zhí)行下面命令：
$ 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應當和電腦連接的是同一個網(wǎng)絡
打開偏好設置-網(wǎng)絡-查看當前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）過程中 出現(xiàn)react-native：command not found 和 zsh: command not found: react-native
