一、創(chuàng)建RN新項(xiàng)目
1爵卒、創(chuàng)建新項(xiàng)目
在安裝好RN環(huán)境之后堡称，執(zhí)行如下命令
npx react-native init xxx項(xiàng)目名
找到項(xiàng)目的ios目錄，將現(xiàn)有的swift項(xiàng)目拷貝到ios目錄中
2墙贱、修改podfile文件
最新的RN項(xiàng)目中的podfile文件可以在下面這個(gè)鏈接上查看：
參考該文件并對(duì)自己的Podfile文件進(jìn)行修改热芹，如：
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
進(jìn)入到ios目錄下，執(zhí)行pod install命令安裝項(xiàng)目所需要的庫(kù)
3嫩痰、加載
在合適的地方加載bundle文件測(cè)試
比如可以放在appdelegate文件
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
// 測(cè)試RN項(xiàng)目
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剿吻、第一個(gè)頁(yè)面
二窍箍、常見(jiàn)問(wèn)題
問(wèn)題1：
RCTStatusBarManager module requires that the UIViewControllerBasedStatusBarAppearance key in the Info.plist is set to NO
解決：
在info.plist中串纺，添加View controller-based status bar appearance并設(shè)置為NO
問(wèn)題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
問(wèn)題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.)
看手機(jī)的wifi應(yīng)當(dāng)和電腦連接的是同一個(gè)網(wǎng)絡(luò)
打開(kāi)偏好設(shè)置-網(wǎng)絡(luò)-查看當(dāng)前ip地址，將項(xiàng)目中的localhost改為當(dāng)前ip
jsCodeLocation = NSURL(string:"http://192.168.30.39:8081/index.bundle?platform=ios")!
如果直接運(yùn)行xcode無(wú)法運(yùn)行椰棘，可以試試命令行
npm start
react-native run-ios --device "手機(jī)名"
問(wèn)題4： cocopods報(bào)錯(cuò)
一個(gè)很尷尬的事情纺棺。用RN混編swift的代碼 如果加了use_frameworks!會(huì)報(bào)錯(cuò)
而方法是是去掉use_frameworks
但是去掉之后會(huì)報(bào)
解決方法是加上use_frameworks
解決：
先去除掉use_frameworks
# which 指代的 是 YYImage 即依賴的庫(kù)
pod 'BSText'
pod 'YYImage',:modular_headers => true
問(wèn)題5：react-native命令不生效
