reactNative0.71版本的使用

这篇具有很好参考价值的文章主要介绍了reactNative0.71版本的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

开发环境配置

参考reactNative 官网 版本选中0.71

打包配置

1. IOS

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

证书配置截图如下

reactNative0.71版本的使用,前端,react native

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

2. andorid
  • 参考文献 android 打包
  • 配置打包项

reactNative0.71版本的使用,前端,react native

  • 配置打包快捷操作

reactNative0.71版本的使用,前端,react native

初始配置

  1. 网络配置(http)

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

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

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

reactNative0.71版本的使用,前端,react native

reactNative0.71版本的使用,前端,react native

    1. ios默认开启了http协议

reactNative0.71版本的使用,前端,react native

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

  1. 启动屏

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

reactNative0.71版本的使用,前端,react native

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

  1. 权限

reactNative0.71版本的使用,前端,react native

在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文章来源地址https://www.toymoban.com/news/detail-824008.html

rm -rf ~/Library/Developer/Xcode/DerivedData

到了这里,关于reactNative0.71版本的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ReactNative项目构建分析与思考之native_modules.gradle

    上一篇文章分析完 react-native-gradle-plugin 后,我们知道了react-native-gradle-plugin 主要是对依赖环境,以及RN的依赖版本进行管理。 本篇文章来接着分析 native_modules.gradle 这个脚本,这个脚本是React Native构建中比较重要的一个角色。 这是一个源码形式的脚本文件,虽然只有一个文件

    2024年03月20日
    浏览(41)
  • React Native Maps的使用

    React Native Maps是一个用于在React Native应用中显示地图的库。它提供了许多功能,如显示地图、标记位置、绘制多边形等。以下是React Native Maps的使用步骤: 首先,你需要在你的React Native项目中安装React Native Maps库。可以使用以下命令进行安装: 安装完成后,你需要链接React N

    2024年02月13日
    浏览(42)
  • React Native Camera的使用

    React Native Camera是一个用于在React Native应用中实现相机功能的库。它允许你访问设备的摄像头,并捕获照片和视频。 安装 安装完成后,你需要链接React Native Camera库到你的项目中。可以使用以下命令进行链接: 安装和链接完成后,你需要在你的代码中导入React Native Camera库:

    2024年02月13日
    浏览(40)
  • 使用 React Native CLI 创建项目

    需要掌握的知识点 掌握 JavaScript 基础知识 掌握 React 相关基础知识 掌握 TypeScript 相关基础知识 安装软件前需要首先安装Chocolatey。Chocolatey 是一种流行的 Windows 包管理器。 安装 nodejs 和 JDK 安装需要的开发工具 VsCode Android Studio(主要是用来安装虚 SDK 和安装虚拟设备) 使用

    2024年02月14日
    浏览(60)
  • React Native Vector Icons的使用

    React Native Vector Icons是一个用于在React Native应用中使用矢量图标的库。它提供了许多常见的图标集,如FontAwesome、Ionicons等。 首先,你需要在你的React Native项目中安装React Native Vector Icons库。可以使用以下命令进行安装: 安装完成后,你需要链接React Native Vector Icons库到你的项目

    2024年02月13日
    浏览(37)
  • react-native-clipboard/clipboard使用

    Install the library using either Yarn: or npm: or

    2024年02月08日
    浏览(32)
  • react-native-gesture-handler 手势的使用

    要在React Native项目中使用react-native-gesture-handler,可以按照以下步骤进行设置: 1、首先,在你的React Native项目中安装react-native-gesture-handler。可以使用npm或者yarn命令来安装: 或者 2、安装完成后,需要链接react-native-gesture-handler到你的原生代码。运行以下命令: 3、接下来,在

    2024年02月11日
    浏览(36)
  • react native在windows环境搭建并使用脚手架新建工程

    截止到2024-1-11,使用的主要 软件的版本 如下: 软件实体 版本 react-native 0.73.1 react 18.2.0 react-native-cli 2.0.1 Android Studio 2022.3.1 Patch3 Android SDK Android SDK Platform 33 34 Android SDK Android SDK Tools 33 34 Android SDK Intel x86 Atom_64 System Image Android SDK Google APIs Intel x86 Atom System Image node 20.10.0 yarn 1.

    2024年02月02日
    浏览(48)
  • [前端][杂项] React版本

    前端框架版本迭代很快,所以熟悉框架的版本也很重要。 React 版本介绍 。github上有更加详细的文档 React历史版本下载 因为 React 使用的是 jsx 如果要在浏览器环境中使用 jsx 那么还需要使用babel.js把jsx转换成原生js文件才能被浏览器使用。 babel官网 babel使用 这个babel更是重量级

    2024年04月15日
    浏览(29)
  • React Native expo项目使用expo-image-picker上传图片

     app.json: https://docs.expo.dev/versions/latest/sdk/imagepicker/      expo-image-picker 图片上传 要使用Expo的ImagePicker库进行图片上传,您可以按照以下步骤操作。 首先,确保您已在项目中安装了Expo的ImagePicker库。 然后,您可以使用以下代码来选择图片并上传: 此示例使用Button和Image组件创

    2024年02月15日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包