React Native Boilerplate 使用教程

React Native Boilerplate 使用教程

react-native-boilerplateExpo + Redux + React Navigation pre-setup typescript template (expo SDK 49)项目地址:https://gitcode.com/gh_mirrors/reac/react-native-boilerplate

1. 项目的目录结构及介绍

react-native-boilerplate/
├── __tests__/                  # 测试文件
├── android/                    # Android 项目文件
├── ios/                        # iOS 项目文件
├── src/                        # 源代码目录
│   ├── assets/                 # 静态资源文件（图片、字体等）
│   ├── components/             # 通用组件
│   ├── config/                 # 配置文件
│   ├── navigation/             # 导航配置
│   ├── screens/                # 页面组件
│   ├── services/               # 服务（API、存储等）
│   ├── theme/                  # 主题配置
│   ├── utils/                  # 工具函数
│   ├── App.js                  # 应用入口文件
├── index.js                    # 项目入口文件
├── package.json                # 项目依赖和配置
├── README.md                   # 项目说明文档

2. 项目的启动文件介绍

index.js

这是项目的入口文件，主要负责初始化 React Native 应用并加载 App.js 文件。

import { AppRegistry } from 'react-native';
import App from './src/App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);

App.js

这是应用的入口文件，负责设置应用的初始状态、主题和路由。

import React from 'react';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { store, persistor } from './config/store';
import Navigation from './navigation';

const App = () => (
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <Navigation />
    </PersistGate>
  </Provider>
);

export default App;

3. 项目的配置文件介绍

package.json

这是项目的依赖和配置文件，包含了项目的基本信息、依赖包和脚本命令。

{
  "name": "react-native-boilerplate",
  "version": "1.0.0",
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "react": "17.0.2",
    "react-native": "0.64.2",
    "react-navigation": "^4.4.4"
  },
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/runtime": "^7.14.6",
    "babel-jest": "^27.0.6",
    "jest": "^27.0.6",
    "react-test-renderer": "17.0.2"
  },
  "jest": {
    "preset": "react-native"
  }
}

.env

这是环境变量配置文件，用于存储应用的配置信息，如 API 地址、密钥等。

API_URL=https://api.example.com
API_KEY=your_api_key

app.json

这是应用的基本配置文件，包含了应用的名称、版本等信息。

{
  "name": "MyApp",
  "displayName": "MyApp"
}

通过以上内容，您可以快速了解并开始使用 react-native-boilerplate 项目。希望这份教程对您有所帮助！

react-native-boilerplateExpo + Redux + React Navigation pre-setup typescript template (expo SDK 49)项目地址:https://gitcode.com/gh_mirrors/reac/react-native-boilerplate