/WanAndroidRN

玩安卓 react native expo项目

Primary LanguageTypeScript

项目预览：

一 开发环境

  • 操作系统：Windows 11 专业版 22H2
  • Node：v18.18.2，node源：taobao
  • Yarn：1.22.19
  • jdk：openjdk 11.0.19 2023-04-18
  • Android SDK Build-Tools：33.0.0
  • react-native：0.72.6

二 项目创建

2.1 创建方式

npx create-expo-app WanAndroidRN

2.2 安装依赖

yarn

2.3 运行

npx expo start //运行到expo go
yarn android
npm run android
npm run ios
npm run web

三 如何使用

3.1 下载本项目

git clone https://githubfast.com/PGzxc/WanAndroidRN

3.2 进入本项目，安装依赖

cd WanAndroidRN
yarn

3.3 Expo Go中运行本项目

说明：

  • 已安装Expo Go

  • 在Expo Go中启动项目，不生成android和ios目录

  • 执行npx expo start启动项目(可能出现Network response timed out现象)

3.4 生成android或ios文件夹目录(apk文件安装)

  • 生成android文件夹：npx expo run:android
  • 生成ios文件夹：npx expo run:ios

四 具备知识

  • React Native Elements：UI 组件库
  • NativeBase：UI 组件库
  • gluestackui：UI 组件库
  • React Navigation：导航
  • Expo：开源跨平台工具

五 开发阶段

5.1 v1.0

  • 开发环境搭建、准备阶段
  • 项目创建
  • 项目框架搭建(底部导航框架+切换)
  • 使用了React Navigation导航库

5.2 V2.0

  • 使用 Fetch进行网络请求，返回一个Promise，简化异步操作
  • 使用async/await对Promise进行优化，catch捕获异常
  • 官网—访问网络
  • SafeAreaView上添加style，并设置flex:1，否则无法正常显示
  • 使用@ant-design/react-native蚂蚁金服RN组件，需要导入@react-native-camera-roll/camera-roll、@react-native-community/segmented-control、@react-native-community/slider、@react-native-picker/picker等
  • 使用useEffect更新组件的状态，要谨慎使用第二个参数为空的情形
  • 使用yarn android生成android项目并运行，使用expo start无法启动(报错)
  • 轮播图使用@ant-design/react-native蚂蚁金服RN组件Carousel
  • 自定义组件Banner轮播图、文章Article-Item
  • 复杂组件FlatList，Header头部设置为Banner轮播图、设置refreshing，控制下拉刷新，onEndReachd加载更多

5.3 v3.0

  • 使用SectionList分组列表组件无法实现分组内容Tag显示，使用FlatList自定义Item实现
  • Tags显示使用react-native-tag-select实现
  • ViewPropTypes 将从 React Native 中移除-警告在App.js种添加LogBox

5.4 v4.0

  • 基于@ant-design/react-native蚂蚁金服RN组件Tab展示Tab页面
  • 自定义TreeChildList组件， 展示每个Tab的显示

5.5 v5.0

  • 我的界面UI绘制
  • 基于@ant-design/react-native蚂蚁金服RN组件Grid显示网络布局

5.6 v6.0

  • 消息界面-ui
  • tab切换显示：已读消息和未读消息

5.7 v7.0

  • 配置React Navigation路由导航(Tab+Stack嵌套)
  • 使用ets后缀时，name无法识别为RouteName，暂时使用js后缀

5.8 v8.0

  • 添加react-native-webview网页显示依赖
  • 首页轮播图、首页文章列表、项目点击跳转网页显示
  • useEffect设置标题

5.9 v9.0

  • Login登录、注册页面
  • react-native-toast-notifications土司依赖
  • option.cache = "force-cache"强制缓存

5.10 v10.0

  • 已读、未读消息界面
  • 消息Item跳转WebView显示，添加前缀(传递url)

5.11 v11.0(去除蚂蚁Ant Design依赖-expo错误)

1-依赖删除

  • @ant-design/react-native
  • @react-native-camera-roll/camera-roll
  • @react-native-community/segmented-control
  • @react-native-community/slider
  • @react-native-picker/picker

2-现有项目解决方案

  • 蚂蚁Ant Design-轮播图组件Carousel 替换为react-native-swiper-flatlist
  • 蚂蚁Ant Design-Tabs替换为@react-navigation/material-top-tabs（消息/项目-页面）
  • 蚂蚁Ant Design-Tabs-Grid替换为react-native-draggable-grid(我的-界面)

3-删除

  • android：项目文件夹(作为apk运行到手机上，替换为使用expo扫描显示，如需生成使用npx expo run:android)

六 使用到的依赖库

6.1 安装依赖

yarn add @react-navigation/bottom-tabs(类库名)或
npm install @react-navigation/bottom-tabs

6.2 删除依赖

yarn remove @react-navigation/bottom-tabs(类库名)或
npm uninstall @react-navigation/bottom-tabs

6.3 依赖库

6.4 图标库

七 配置

7.1 .d.ts配置(npx)

  • 项目根目录添加externals.d.ts
  • tsconfig.json中配置externals.d.ts

7.2 .eslintrc.js配置rules规则