一、创立RN新项目
1、创立新项目
在装置好RN环境之后，履行如下指令
npx react-native init xxx项目名
找到项目的ios目录，将现有的swift项目拷贝到ios目录中
2、修正podfile文件
最新的RN项目中的podfile文件能够在下面这个链接上检查：
RN集成Pod的版别
参阅该文件并对自己的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
# which 指代的 是 YYImage 即依靠的库
pod 'BSText'
pod 'YYImage',:modular_headers => true
问题5：react-native指令不生效
配置reactNative（RN）进程从社区装置新版支撑ts的脚手架中 呈现react-native：command not found 和 zsh: command not found: react-native
问题6：使用0.69版别新建项目报错cli.init is not a function
处理：指定版别为0.68.2
问题7: 指定typescript为模板时报错
# error An unexpected error occurred: "https://registry.yarnpkg.com/react-native-template-react-nat...
处理：从社区下载新版支撑ts的脚手架
npm i -g @react-native-community/cli
