【RN】开发第一个react-native程序

本文详细介绍了如何使用ReactNative构建跨平台应用,包括搭建开发环境(Node、JavaJDK和AndroidStudio)、创建新项目、编译运行以及apk打包的基本步骤。
摘要由CSDN通过智能技术生成

简言

React Native 是一个使用React和应用平台的原生功能来构建 Android 和 iOS 应用的开源框架。通过 React Native,您可以使用 JavaScript 来访问移动平台的 API,以及使用 React 组件来描述 UI 的外观和行为:一系列可重用、可嵌套的代码。
记录下,开发一个react-native程序的步骤。

搭建开发环境

搭建开发环境官方地址
这里搭建的是androidapp开发环境。
整体来说开发环境需要有:Node、JavaJDK和 Android Studio。

Node

注意 Node 的版本应大于等于 16,安装完 Node 后建议设置 npm 镜像(淘宝源)以加速后面的过程(或使用科学上网工具)。

JavaJDK

Java SE Development Kit (JDK)

React Native 需要 Java Development Kit [JDK] 17。你可以在命令行中输入 javac -version(请注意是 javac,不是 java)来查看你当前安装的 JDK 版本。

低于 0.73 版本的 React Native 需要 JDK 11 版本,而低于 0.67 的需要 JDK 8 版本。

Yarn

Yarn是 Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载。

npm install -g yarn

安装完 yarn 之后就可以用 yarn 代替 npm 了,例如用yarn代替npm install命令,用yarn add 某第三方库名代替npm install 某第三方库名。

Android 开发环境

Android 开发环境主要是指要有 Android SDK 和Android Virtual Device。
流程比较繁琐,请官网搭建开发环境地址查阅。

创建新项目

创建命令:

npx react-native@latest init AwesomeProject

AwesomeProject为项目名。

如果你之前全局安装过旧的react-native-cli命令行工具,请使用npm uninstall -g react-native-cli卸载掉它以避免一些冲突:
npm uninstall -g react-native-cli @react-native-community/cli

创建成功后项目结构:
在这里插入图片描述

编译并运行 React Native 应用

确保你先运行了模拟器或者连接了真机,然后在你的项目目录中运行yarn android或者yarn react-native run-android:

cd AwesomeProject
yarn android
# 或者
yarn react-native run-android

如果配置没有问题,你应该可以看到应用自动安装到设备上并开始运行。注意第一次运行时需要下载大量编译依赖,耗时可能数十分钟。此过程严重依赖稳定的代理软件,否则将频繁遭遇链接超时和断开,导致无法运行。

这里是真的慢,真的建议换npm源

耐心等待,运行成功后模拟器或真机将会运行这个项目。
在这里插入图片描述

打包

apk打包参考官网地址

结语

就这样一个简单的react-native程序就创建好了。
从项目配置文件(package.json)可以看出,这个一个极简的项目,若想实现更多功能还需要添加其他依赖,例如 添加导航库React Navigation等。

  • 28
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ZSK6

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值