简言
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等。