reactNative0.71版本的使用

开发环境配置

参考reactNative 官网 版本选中0.71

打包配置

1. IOS

打开项目 -> 进入ios目录->执行命令 pod install ->项目名称.xcworkspace -> 使用xcode打开->配置证书

证书配置截图如下

💡tips:TARGETS目录下会有多个文件(以test tvos结尾的文件)根据项目要求保留,本项目不需要单元测试和tvos可以删除,多余的文件可能会导致打包不成功的情况

2. andorid
  • 配置打包快捷操作

初始配置

  1. 网络配置(http)

在ios9和android9开始默认使用https,但是由于后台有可能使用http协议,我们需要在原始的项目中配置http,如果不配置http,打包后app会变成炫酷的白屏以及网络失败

    1. android在debug模式下,是默认开启http,build模式下默认不开启

复制 android:usesCleartextTraffic="true"放在main AndroidManifest.xml 下

    1. ios默认开启了http协议

tips:这是reactNative生成的,很可能上架的时候被拦截,不让上架,这时候就需要单独配置域名

  1. 启动屏

启动屏采用的是react-native-splash-screen 根据文档就能使用app的启动屏,但是其中有一个bug如图:

在新版中采用如下代码,会使app.js中的启动屏不会消失

  1. 权限

在ios启动app时,会报: No permission handler detected

package.json 文件

复制代码
"reactNativePermissionsIOS": [
    "AppTrackingTransparency",
    "BluetoothPeripheral",
    "Calendars",
    "Camera",
    "Contacts",
    "FaceID",
    "LocationAccuracy",
    "LocationAlways",
    "LocationWhenInUse",
    "MediaLibrary",
    "Microphone",
    "Motion",
    "Notifications",
    "PhotoLibrary",
    "PhotoLibraryAddOnly",
    "Reminders",
    "Siri",
    "SpeechRecognition",
    "StoreKit"
  ],

需要执行 npx react-native setup-ios-permissions 然后cd ios 执行 pod install

执行以下命令清除Xcode Derived Data

复制代码
rm -rf ~/Library/Developer/Xcode/DerivedData
相关推荐
摘星编程29 分钟前
OpenHarmony环境下React Native:Tooltip自动定位
javascript·react native·react.js
2501_921930833 小时前
React Native 鸿蒙跨平台开发:LinearGradient 径向渐变
react native·react.js·harmonyos
2601_949593653 小时前
React Native 鸿蒙跨平台开发:LinearGradient 实战案例集
react native·react.js·harmonyos
2501_920931704 小时前
React Native鸿蒙跨平台跨平台阅读应用实现方案,包含书籍展示、分类筛选、搜索排序等功能模块,通过清晰的状态管理实现数据筛选与排序
react native·react.js·ecmascript·harmonyos
xiaoqi9224 小时前
React Native鸿蒙跨平台实现图片画廊类页面是视觉展示型APP(如摄影类、图库类、设计类APP)的核心载体,其核心需求是实现图片的流畅渲染
javascript·react native·react.js·ecmascript·harmonyos
2601_949593655 小时前
React Native 鸿蒙跨平台开发:LinearGradient 渐变动画效果
javascript·react native·react.js
qq_177767375 小时前
React Native鸿蒙跨平台音乐播放器涉及实时进度更新、播放控制、列表交互、状态管理等核心技术点
javascript·react native·react.js·ecmascript·交互·harmonyos
2501_920931705 小时前
React Native鸿蒙跨平台实现了简单的商品图片轮播功能,为用户提供了直观的商品图片浏览体验,帮助用户全面了解商品外观
javascript·react native·react.js·ecmascript·harmonyos
2501_921930835 小时前
React Native 鸿蒙跨平台开发:LinearGradient 线性渐变详解
react native·react.js·harmonyos
2501_9209317012 小时前
React Native鸿蒙跨平台采用ScrollView的horizontal属性实现横向滚动实现特色游戏轮播和分类导航
javascript·react native·react.js·游戏·ecmascript·harmonyos