您现在的位置是:首页 >技术交流 >React native RN 开发实例网站首页技术交流

React native RN 开发实例

linzhiji 2023-06-21 04:00:02
简介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优化版应用

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。