React native

技术选型：

快捷样式编写：NativeWind Expo | NativeWind
路由导航（expo不用，待定）：React-Navigation Getting started | React Navigation
UI组件库： React Native Elements Icon | React Native Elements
数据仓库：Redux Getting Started with Redux | Redux
所有图标

@expo/vector-icons directory

原生React Native

安装

初始化

npx react-native init MyApp

或者

react-native init <projectName>这样会创建一个react-native项目。

这两种方法创建使用的技术栈相同：

React Function
Tsx

运行

首先：

npm start开启服务器
npm run android启动安卓模拟器

安装必要插件

NativeWind

官网：https://www.nativewind.dev/quick-starts/react-native-cli

安装：

安装

npm install nativewind
npm install --save-dev tailwindcss@3.3.2

npx tailwindcss init会创建一个tailwind.config.js文件

// tailwind.config.js

module.exports = {
  content: ["./App.{js,jsx,ts,tsx}", "./<custom-folder>/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

添加Babel插件，打开babel.config.js文件

// babel.config.js
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ["nativewind/babel"],
};

然后就可以愉快的使用啦

安装

npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context

需要配置下

打开android/app/src/main/java/<your package name>/中MainActivity.kt文件

class MainActivity: ReactActivity() {
  // ...
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(null)
  }
  // ...
}

并且在文件头部导入：

import android.os.Bundle;

然后就可以愉快的使用啦

问题

开发到现在，遇到一个问题，我在安装 react-native-elements 时，组件是可以用的，但是 icon 用不了，在配置 icon 时，在安卓上无法展示，各种方法都试遍了都不管用。

到这里，使用原生方案暂时搁置，去看看 expo 开发方案。

Expo 开发

开发文档：Build a screen

Expo 提供了一系列的 Api 来供 React Native 使用。

也可以直接在真机上模拟运行，据说是更方便的开发方案。

安装

npx create-expo-app <Project Name>

打包发布

这里我们使用 eas 在线打包发布

安装 eas：npm install -g eas-cli
登陆 Expo 账号：

账号于Expo进行注册
使用eas login登陆

输入命令eas build:configure，将会生成一个 eas.json 文件

{
  "cli": {
    "version": ">= 7.6.2"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "channel": "development"
    },
    "preview": {
      "distribution": "internal",
      "channel": "preview"
    },
    "production": {
      "channel": "production"
    }
  },
  "submit": {
    "production": {}
  }
}

之后就可以打包发布了，

如果只是想生成apk文件（指定预览环境），而不是生成可以上传到谷歌的 aab 文件，输入命令：eas build -p android --profile preview

然后查看 Expo 官网，会发现正在构建，等待构建完成后下载即可

这里有另外一种方式，修改eas.json

修改此部分为：

"production": {
  "android": {
    "buildType": "apk"
  },
}

然后打包的也是apk，否则默认为aab

如果想要上传的谷歌应用商店，需要打包aab文件，这里打包命令为：全平台：eas build --platform all或指定平台eas build --platform android

此时 Expo 官网，将会生成一个 aab 文件