React ネイティブ RN 開発例

複数エントリのロード方法 

React Native 混合開発マルチエントリ読み込み方法 Develop Paper

初期プロパティ

公式ドキュメント: React Navigation

モジュール名

例: GitHub - hcn1519/ReactNative-iOS-Example

React Native 混合開発マルチエントリ読み込み方法 Develop Paper

プロジェクト構造 

参考:GitHub - nam-dohai/freelance-platform-app

よくある問題

1、过多的注册RN组件( AppRegistry.registerComponent() );
2、从原生跳转指定的RN页面及传值问题;
3、路由处理:原生 -> React Native -> 原生 -> React Native,多次操作后的进栈出栈问题。

React Nativeとネイティブ(Android、iOS)の混合コンパイル、3つの端末の問題点の分析 - プログラマーが求めた

iOSは実機に接続します

スクリプトを追加

../node_modules/react-native/scripts/react-native-xcode.sh

バンドル URL が存在しません [修正]

https://onexlab-io.medium.com/no-bundle-url-present-fixed-ca2688a80f66

質問:

RCTStatusBarManager モジュールでは、Info.plist の UIViewControllerBasedStatusBarAppearance キーが NO に設定されている必要があります。

最も簡単な解決策は、プロンプトに従い、Info.pllist を変更し、フィールドを追加することです。 


<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>

これを NO に設定すると、ビューコントローラーで呼び出されなくなります。

    override var preferredStatusBarStyle: UIStatusBarStyle {
        return .darkContent
    }

私たちのプロジェクトの iOS は rn に埋め込まれており、他のページにはまだステータスバーが必要なので、引き続き変更する必要があります

プロジェクト -> ターゲット -> ステータスバー 希望の色でスタイルを設定します。

解決  

ステータスバーのスタイルを設定する方法 | サルヌ

xcode10 -preferredStatusBarStyle 変数が iOS12 で機能しない? - スタックオーバーフロー

パック

React Native パッケージ化 IOS の詳細な手順

RN プロジェクト パッケージに追加

        "build:ios": "react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios'",

注文の実行:

yarn build:ios

 

Xcodeプロジェクトに追加

 

 

ios コードに判定があり、sheme は非デバッグ環境を選択することでローカルの js リソースをパッケージ化できます。 

    #ifdef DEBUG
      jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
    #else
      jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
    #endif

その他の参考文献

GitHub - 1280103995/RN-Android-iOS: ネイティブ Android と iOS と React Native の混合、アプリケーションの Android MVP 最適化バージョン

おすすめ

転載: blog.csdn.net/linzhiji/article/details/130273048