Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/supervons/explorern

新版本RN项目,Base on react native 0.74.1,包含众多RN组件,先个人实践后生产使用,累积方案应对各种场景,后端地址:https://github.com/supervons/ExploreKoa
https://github.com/supervons/explorern

android ios react-native-app react-native-component react-native-demo react-native-study redux rn-demo rn-study

Last synced: 4 days ago
JSON representation

新版本RN项目,Base on react native 0.74.1,包含众多RN组件,先个人实践后生产使用,累积方案应对各种场景,后端地址:https://github.com/supervons/ExploreKoa

Awesome Lists containing this project

README

        

简体中文 | [English](./README_EN.md)

[![Android-build CI](https://github.com/supervons/ExploreRN/actions/workflows/android-build.yml/badge.svg)](https://github.com/supervons/ExploreRN/actions/workflows/android-build.yml)
# 项目目的
### 1.探索新版本RN特性;
### 2.集成各类组件并实验,造自己的轮子!
### 3.锻炼自己的架构能力并持续编码和代码优化。
### 欢迎加入我们:
QQ群:783071253
邮箱:[email protected]
当前RN版本:0.74.1

### 下载(Android)
#### Firim : http://d.maps9.com/25th
下载地址

### 测试账号

用户名:test
密码:test

# 项目后台
### 基于Koa2 + Typescript 打造高可用的NodeJS后台
### 地址:https://github.com/supervons/ExploreKoa

# 功能

| 功能名称 | 简述 | 使用组件名称及版本 |
| ------------ | -------------------------------- | ------------------------------------------------------------ |
| 图片选择 | 选择相册中的图片,亦或进行拍照 | [email protected] |
| 扫一扫 | 扫一扫二维码,获取二维码中的信息 | [email protected] |
| 换肤 | 更换系统导航头部及按钮颜色 | [email protected] |
| UI库 | 整体UI库 | [email protected] |
| Redux全家桶 | redux及中间件的使用 | [email protected]
[email protected]
[email protected]
[email protected] |
| 网络请求 | 统一封装网络请求 | [email protected] |
| 基于hook重写 | 基于hook重写class页面 | [email protected] |
| 骨架屏 | 提升列表、页面浏览体验 | [email protected] |
| 国际化 | app语言切换,随本地系统设置 | [email protected] + [email protected] |
| 组件可拖拽 | 组件元素随触摸拖拽移动位置 | [email protected] |

# 已开发

- [x] 动态Tab-bar
- [x] 换肤
- [x] 骨架屏
- [x] 多语言支持
- [x] 莫兰迪色卡
- [x] 组件可拖拽支持
- [x] 完善的预览页面
- [x] 使用新KOA搭建后端
- [x] 更好的动画Lottie
- [x] 邮箱注册
- [x] 增加 Sentry 错误日志监控
- [x] 支持 TypeScript
- [x] 地理位置获取

# 待开发

- [ ] 全屏水印实现.
- [ ] 创建完整的 `react-native-echarts-pro` 测试用例页面
- [ ] 使用 sass 改造 css 样式
- [ ] 多bundle支持
- [ ] 邮箱找回密码
- [ ] 头像更换及头像历史记录 - 50%
- [ ] 地图集成
- [ ] 推送集成-iOS、HUAWEI、Xiaomi、极光
- [ ] 增加 Websocket 示例
- [ ] 增加 H5 交互示例
- [ ] 增加网络请求 Hook.
- [ ] 增加 patch 脚本.
- [ ] 增加路由跳转动画,翻转、抽屉、二楼动画.
- [ ] 增加陀螺仪动画.
- [ ] 更新 react-navigation 至 7.x 版本.
- [ ] 接入 GPT 语音助手.
- [ ] 接入 AI 识别(OpenCV).
- [ ] 更新到最新版本0.75.0

# 预览
#### 动态tab-bar
动态tab-bar

#### 骨架屏
骨架屏

#### 组件可拖拽
组件可拖拽

#### I18国际化
中文英文

#### 主题换肤
主题换肤

#### 莫兰迪色卡
莫兰迪色卡

# 项目结构

```
|-- android // android 目录
|-- ios // iOS 目录
|-- src // 项目文件夹
| |-- actions // 接口相关目录
| |-- common // 通用配置常量目录
| |-- components // 系统级组件目录
| |-- hook // 自定义hook目录
| |-- redux // redux相关目录
| | |-- action
| | |-- reducer
| | |-- store
| |-- resource // 资源目录
| |-- routers // 路由导航目录
| |-- screens // 系统页面目录
| |-- styles // 系统通用样式目录
| |-- utils // 系统工具目录
|-- App.js // 入口文件
|-- buildAndroid.sh // android打包脚本
|-- package.json // 这个就不用说了
|-- package-lock.json // 同上
|-- .prettierrc // prettierrc 代码格式化目录
```
# 环境要求
- node > 18
- JDK > 17

# 安装依赖

```shell
yarn install
# 如果是 iOS 则需要执行以下操作,确保网络畅通
cd ios && pod install
```

# 运行
`android`:
- react-native run-android
- runAndroid.sh

`ios`:
- Xcode选择AwesomeProject.xcworkspace启动

# 设置服务端URL
`src/common/constants.js` 中设置 `serverUrl`

# 国际化语言设置
`/src/common/languages.js` 中设置支持的语言,目前支持 `CN`、`EN`

对应在 `/src/common/cn.js`、`/src/common/en.js` 设置相关语言包

页面使用:
```javascript
I18n.t("Register.userEmptyToast") // 注册页面用户名空时提示语
```