React Native Simple Store 项目教程

React Native Simple Store 项目教程

react-native-simple-storeA minimalistic wrapper around React Native's AsyncStorage.项目地址:https://gitcode.com/gh_mirrors/re/react-native-simple-store

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

react-native-simple-store/
├── docs/
│   └── index.md
├── src/
│   ├── configs/
│   │   ├── dev.json
│   │   └── prod.json
│   └── ...
├── .editorconfig
├── .eslintrc.json
├── .gitignore
├── .watchmanconfig
├── App.js
├── README.md
├── app.json
├── babel.config.js
├── package.json
└── yarn.lock

目录结构介绍

• docs/: 包含项目的文档文件，如 index.md。
• src/: 项目的源代码目录，包含配置文件和其他源代码。
  • configs/: 包含开发和生产环境的配置文件，如 dev.json 和 prod.json。
• .editorconfig: 编辑器配置文件。
• .eslintrc.json: ESLint 配置文件。
• .gitignore: Git 忽略文件配置。
• .watchmanconfig: Watchman 配置文件。
• App.js: 项目的启动文件。
• README.md: 项目说明文档。
• app.json: React Native 应用配置文件。
• babel.config.js: Babel 配置文件。
• package.json: 项目依赖和脚本配置文件。
• yarn.lock: Yarn 锁定文件，确保依赖版本一致。

2. 项目的启动文件介绍

App.js

App.js 是 React Native 项目的入口文件，负责初始化应用并渲染根组件。以下是一个简单的 App.js 示例：

import React from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './src/reducers';
import rootSaga from './src/sagas';
import AppContainer from './src/containers/AppContainer';

const sagaMiddleware = createSagaMiddleware();
const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(rootSaga);

const App = () => (
  <Provider store={store}>
    <AppContainer />
  </Provider>
);

export default App;

启动文件介绍

• Provider: 将 Redux store 提供给应用的其他部分。
• createStore: 创建 Redux store。
• applyMiddleware: 应用中间件，如 redux-saga。
• createSagaMiddleware: 创建 Saga 中间件。
• rootReducer: 根 Reducer，合并所有 Reducer。
• rootSaga: 根 Saga，管理所有 Saga。
• AppContainer: 应用的根容器组件。

3. 项目的配置文件介绍

app.json

app.json 文件包含了 React Native 应用的基本配置信息，如应用名称、版本等。以下是一个示例：

{
  "name": "SimpleStore",
  "displayName": "Simple Store",
  "version": "1.0.0",
  "orientation": "portrait",
  "icon": "./assets/icon.png",
  "splash": {
    "image": "./assets/splash.png",
    "resizeMode": "contain",
    "backgroundColor": "#ffffff"
  }
}

配置文件介绍

• name: 应用的内部名称。
• displayName: 应用的显示名称。
• version: 应用的版本号。
• orientation: 应用的默认屏幕方向。
• icon: 应用图标的路径。
• splash: 启动画面配置，包括图片路径、调整模式和背景颜色。

babel.config.js

babel.config.js 文件用于配置 Babel 编译器，以下是一个示例：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    ['@babel/plugin-proposal-decorators', { 'legacy': true }],
    ['@babel/plugin-proposal-class-properties', { 'loose

react-native-simple-storeA minimalistic wrapper around React Native's AsyncStorage.项目地址:https://gitcode.com/gh_mirrors/re/react-native-simple-store