Create a new project in RN

Create a new project

After installing the RN environment, execute the following command

NPX react-native init XXX Specifies the project nameCopy the code

Locate the project’s ios directory and copy the existing Swift project into the ios directory

2. Modify the podfile file

Podfiles in the latest RN projects can be viewed at this link:

RN integrated Pod version

Refer to this file and modify your own Podfile, such as:

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 # rich text pod 'WechatOpenSDK' # wechat 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 endCopy the code

Go to the ios directory and run the pod install command to install the library required by the project

3, load,

Load the bundle file tests where appropriate

You can put it in an appDelegate file, for example

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {// Test RN project 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 }Copy the code

4. First page

2. Frequently asked Questions

Question 1:


RCTStatusBarManager module requires that the UIViewControllerBasedStatusBarAppearance key in the Info.plist is set to NO

Copy the code

Solution:

In info.plist, add View Controller-based Status bar appearance and set it to NO

Question 2:

[!]  /bin/bash -c set -e #! /bin/bash set -e PLATFORM_NAME="${PLATFORM_NAME:-iphoneos}" CURRENT_ARCH="${CURRENT_ARCH}" ...... (omitted) 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 detailsCopy the code

Solution:

Run the following command:


$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer/

Copy the code

Enter the MAC password and reinstall


$ pod install

Copy the code

Question 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.)Copy the code

Your phone’s wifi should be connected to the same network as your computer

Go to Preferences – Networks – View current IP address and change localhost in the project to the current IP address

JsCodeLocation = NSURL (string: "http://192.168.30.39:8081/index.bundle? platform=ios")!Copy the code

If running Xcode directly doesn’t work, try the command line


npm start

Copy the code
React-native run-ios -- Device"Copy the code

Problem 4: Cocopods error

A very embarrassing thing. RN mixed swift code if added use_frameworks! complains

The method is to remove use_frameworks, but this will be reported

The solution is to add use_frameworks

Solution:

Get rid of use_frameworks

# which refers to the dependent library pod 'BSText' pod 'YYImage',:modular_headers => trueCopy the code

Problem 5: The react-native command does not take effect

React-native: Command Not found and ZSH: Command Not found: React-native are displayed during reactNative (RN) configuration