跨端应用–ReactNative开发

前言

    React Native使你只使用JavaScript也能编写原生移动应用Android和iOS。 想必前端跨平台都听说过现在现在比较火热的Flutter、ReactNative、Weex。Flutter它可能是使用了dart语言也是跨端，然后是一种新的语法可能对前端来说得重新学习一遍。而ReactNative与Weex它两本身就是通过前端React与Vue语法，只要会这两个这两个框架还是很好上手的。ReactNative 它在设计原理上和React一致，通过声明式的组件机制来搭建丰富多彩的用户界面。稍微区别的就是style样式的写法稍微有点区别感觉剩下的都是跟React一致。

环境搭建

    因为是跨端项目需要安卓环境以及iOS的开发环境，目前我自己就只是搭建了安卓的环境。

    必须安装的依赖有：Node、JDK 和 Android Studio。
这里有关Node以及JDK和安卓的的环境搭建就不一一介绍了，网上都是有的，官网也是有的。

（这里注意的是node的版本以及jdk的版本还有就是安卓中SDK的版本）

• node >=12
• jdk 1.8 (必须)
• Android SDK Platform 29

官网ReactNative安卓环境搭建(官方文档): reactnative.cn/docs/enviro…

初始化项目

通过node安装带的npx初始化项目

npx react-native init AwesomeProject
复制代码

这里的AwesomeProject就是项目的名称， 也可以通过react-native-cli初始化项目，但是这个必须是全局安装了react-native-cli，感觉是还是npx来的方便所以我也是选择这个。这个我们默认初始化react-native的最高版版本，我们也可以通过--version X.XX.X来指定项目react-native的版本。

还有就是我们可以通过--template来指定下载项目初始化的指定模板，比如官网有示列写的使用typescript的版本

npx react-native init AwesomeTSProject --template react-native-template-typescript
复制代码

因为到接触到react-native开发APP项目自己也是开发好几个，但是每次新建项目都是通过复制之前的项目的依赖来做项目的初始化感觉很麻烦所以自己也手动根据自己需要基础依赖来搭建了一个初始化的模板。

npm包地址：www.npmjs.com/package/rea…

github地址：github.com/jetBn/react…

该模板主要是配置了一些eslint和一些项目基本依赖配置信息，比如使用Ant的react-native的UI框架以及网络请求，上传文件等等。
具体依赖以及文件目录信息如下：