React native RN 开发实例

多入口加载方式 

React Native 混合开发多入口加载方式 - 知乎

initialProperties

官方文档：React Navigation

moduleName

案例：GitHub - hcn1519/ReactNative-iOS-Example

React Native 混合开发多入口加载方式 - 知乎

项目结构 

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

常见问题

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

React Native与原生（Android、iOS）混编，三端痛点解析 - 简书

ios连接真机

添加script

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

No bundle URL present [fixed]

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

问题：

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

最简单的方案就是按提示，改一下Info.pllist，加字段 

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

这里设置为NO后，viewcontroller里将不会调用

    override var preferredStatusBarStyle: UIStatusBarStyle {
        return .darkContent
    }

我们的项目的ios嵌入rn，其他页面还是需要statusbar的，所以还要继续修改

Project -> Targets -> Status Bar Style by desired color.

解决方案  

How to set status bar style | Sarunw

xcode10 - preferredStatusBarStyle var not working in iOS12? - Stack Overflow

打包

React Native打包IOS超详细步骤_rn打包ios_羊二哥的博客-CSDN博客

RN项目package里添加

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

执行命令：

yarn build:ios

 

添加到xcode项目里

 

ios代码里有判断，sheme选非debug环境就能打包本地的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优化版应用