React Native 开发环境搭建及Demo入门教程_react-native-ui-lib

1、安装Android studio

Download Android Studio & App Tools - Android Developers 安卓开发环境

Android studio是安卓应用的开发工具，安装它是为了帮助我们自动安装Android SDK和虚拟化套件，不需要一个个手动下载。

 安装studio，一直点击下一步：

安装完成后打开studio会弹出初次设置

 

 

之后一直下一步就行了，然后内存大的可以将内存设置调大一点。

配置环境变量：

新增Path变量：

2、使用Expo创建工程

Create your first app - Expo Documentation app脚手架

使用维护TypeScript模板的Expo创建模板工程

yarn create expo-app --template

选择模板工程

命名项目名称

安装成功

3启动

将package.json改为如下命令，方便清缓存，不然总出错

数据线连接手机，并打开手机的开发者模式，将开发者选项中的USB安装和USB调试打开，下图为小米手机，其他手机请百度：

可使用adb devices命令查看是否连接成功

adb devices

启动项目

输入"a"就会在android手机上自动安装Expo Go应用，并打开你的项目

首次连接完成后，在同一局域网下，可拔掉数据线，通过Expo中的扫码形式预览项目（或者手机启用无线调试模式）

通过键入"w"可在预览web形式的项目，在此之前运行如下命令安装依赖，否则启动失败：

本机使用了node16，在node18下会报错。

yarn add react-dom react-native-web --save
 
yarn add @expo/webpack-config --save-dev
 
npx expo install react-dom react-native-web @expo/webpack-config

4、使用UI框架React Active Elements

使用react-native@0.60.0及以上版本可自动包含icon等依赖

安装依赖：

yarn add @rneui/themed @rneui/base

elements的api

https://reactnativeelements.com/docs/components/button

5、扩展：使用UI框架antd Design Mobile RN

https://rn.mobile.ant.design/docs/react/introduce-cn

安装：

yarn add @ant-design/react-native

引入组件：

方式一： import Button from '@ant-design/react-native/lib/button';
 
方式二： import { Button } from '@ant-design/react-native';
 
使用方式二形式引入组件需要安装babel相关依赖并配置，否则报错：
 
 
yarn install babel-plugin-import --save-dev 
 
添加babel.config.js的配置
{
  "plugins": [
    ["import", { libraryName: "@ant-design/react-native" }] 
  ]
}
 
说明：有人反映通过 react-native init 创建的项目在使用时可能会报 Unable to resolve module react-dom 的错误 ，此时不妨安装 babel-plugin-module-resolver 试试~

6、相关资料

Create your first app - Expo Documentation app脚手架

https://reactnavigation.org/docs/getting-started/ 前端导航框架

Download Android Studio & App Tools - Android Developers 安卓开发环境

React Native Elements UI框架 React Native Elements

Ant Design Mobile | A Mobile Design Specification UI框架 Ant Design Mobile RN