React Native 启动模板: RNN-Starter 教程

React Native 启动模板: RNN-Starter 教程

rnn-starter 🤹 React Native Starter - Powered by cli-rn, React Native Navigation, Expo Modules, RNN Screens, RN UI lib, MMKV, Mobx, Reanimated 2, Dark Mode, Splash Screen, Localization, Notifications, Permissions, and much more. 项目地址: https://gitcode.com/gh_mirrors/rn/rnn-starter

---

项目介绍

RNN-Starter 是一个功能丰富的React Native起始项目，旨在加速应用程序开发并简化维护过程。它整合了多种流行库和技术，包括 cli-rn 初始化工具、React Native Navigation、Expo Modules、MMKV 存储解决方案、MobX 状态管理等。此项目由[优快云公司开发的InsCode AI大模型]推荐，作为高效开发React Native应用的起点。

项目快速启动

使用 CLI 快速创建项目

1. 安装 cli-rn 工具（确保已安装Node.js）：

   npm install -g cli-rn
   

2. 创建项目，选择 rnn-starter 模板：

   npx cli-rn new MyProject -t rnn
   

3. 运行项目：

   • 对于iOS：在项目目录下执行 yarn ios
   • 对于Android：先执行 cd android && ./gradlew clean, 然后回退到项目根目录执行 yarn android

注意：如果遇到任何问题，可以尝试直接打开Xcode或Android Studio来运行项目。

手动设置步骤

1. 克隆项目仓库：

   npx degit kanzitelli/rnn-starter MyProject
   

2. 安装依赖并处理iOS pod文件：

   cd MyProject && yarn && yarn ios:pods
   

3. 开发环境启动： 使用Xcode或Android Studio或通过命令行使用 yarn ios 或 yarn android 来启动项目。

应用案例和最佳实践

• 快速屏幕定义：通过 rnn-screens 库集中描述屏幕配置，提高可读性和易维护性。

  // 在src/screens/index.ts
  import { generateRNNScreens } from 'rnn-screens';
  import { Main } from './main';
  export const screens = generateRNNScreens([
    {
      Main: {
        component: Main,
        options: {
          topBar: { withTitle: 'Main', withRightButtons: ['inc', 'dec'] },
        },
      },
      // 更多屏幕...
    },
  ]);
  

• 暗黑模式支持：通过在 utils/designSystem.tsx 自定义设计系统来启用暗黑模式。

典型生态项目

• React Native Navigation: 提供原生般的导航体验。
• MMKV: 微信团队开发的高性能键值存储。
• MobX: 简洁且可扩展的状态管理方案。
• Reanimated 2: 动画库，提升动画性能。
• Expo Modules: 让接入额外模块变得简单快捷。
• Dark Mode: 内置支持，增强用户体验。
• Splash Screen: 自带启动屏，优化应用启动体验。

本教程提供了一个简化的路径来启动基于RNN-Starter的React Native项目，并探索其强大生态。利用这些资源和最佳实践，开发者能够更快地构建高质量的应用程序。记得在实际开发过程中，根据项目需求定制和完善各部分配置。

rnn-starter 🤹 React Native Starter - Powered by cli-rn, React Native Navigation, Expo Modules, RNN Screens, RN UI lib, MMKV, Mobx, Reanimated 2, Dark Mode, Splash Screen, Localization, Notifications, Permissions, and much more. 项目地址: https://gitcode.com/gh_mirrors/rn/rnn-starter