Skip to content

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

License

Notifications You must be signed in to change notification settings

supervons/ExploreRN

Folders and files

NameName
Last commit message
Last commit date

Latest commit

27ba490 · Mar 21, 2025
Aug 25, 2022
May 24, 2024
May 24, 2024
Mar 4, 2024
May 23, 2024
Feb 12, 2025
Aug 30, 2022
Mar 7, 2025
Mar 4, 2024
Apr 12, 2021
May 23, 2024
Apr 12, 2021
Mar 4, 2024
May 23, 2024
Mar 7, 2025
Mar 4, 2024
Mar 4, 2024
Aug 19, 2021
Aug 7, 2024
Aug 7, 2024
Mar 4, 2024
Mar 4, 2024
Aug 15, 2019
Mar 10, 2021
Mar 4, 2024
Apr 9, 2022
May 23, 2024
Mar 10, 2025
Aug 15, 2019
Mar 4, 2024
Mar 21, 2025

Repository files navigation

简体中文 | English

Android-build CI

项目目的

1.探索新版本RN特性;

2.集成各类组件并实验,造自己的轮子!

3.锻炼自己的架构能力并持续编码和代码优化。

欢迎加入我们:

QQ群:783071253
邮箱:supervons@sina.com
当前RN版本:0.74.1

下载(Android)

下载地址

测试账号

用户名:test
密码:test

项目后台

基于Koa2 + Typescript 打造高可用的NodeJS后台

功能

功能名称 简述 使用组件名称及版本
图片选择 选择相册中的图片,亦或进行拍照 react-native-image-picker@2.3.4
扫一扫 扫一扫二维码,获取二维码中的信息 react-native-camera@3.8.0
换肤 更换系统导航头部及按钮颜色 react-navigation@3.11.1
UI库 整体UI库 react-native-elements@3.1.0
Redux全家桶 redux及中间件的使用 redux@4.0.4
redux-persist@5.10.0
redux-logger@3.0.6
redux-thunk@2.3.0
网络请求 统一封装网络请求 axios@0.19.0
基于hook重写 基于hook重写class页面 react@17.0.1
骨架屏 提升列表、页面浏览体验 react-native-shimmer-placeholder@2.0.7
国际化 app语言切换,随本地系统设置 react-native-localize@2.0.3 + i18n-js@3.8.0
组件可拖拽 组件元素随触摸拖拽移动位置 react-native-draggable@3.3.0

已开发

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

待开发

  • 全屏水印实现.
  • 创建完整的 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

安装依赖

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 中设置支持的语言,目前支持 CNEN

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

页面使用:

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