React Native Boilerplate 使用教程

React Native Boilerplate 使用教程

React-Native-Boilerplate🚀🎉📚 Boilerplate and Starter for React Native, Expo, NativeWind and TypeScript ⚡️ Made with developer experience first: React Native + Expo + TypeScript + ESLint + Prettier + Husky + Lint-Staged + Jest + Detox + VSCode + NativeWind项目地址:https://gitcode.com/gh_mirrors/reactn/React-Native-Boilerplate

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

React-Native-Boilerplate/
├── src/
│   ├── assets/          # 存放静态资源，如图片、字体等
│   ├── components/      # 存放可复用的组件
│   ├── config/          # 存放配置文件
│   ├── navigation/      # 存放导航相关的文件
│   ├── screens/         # 存放应用的各个页面
│   ├── services/        # 存放服务，如API请求等
│   ├── store/           # 存放Redux相关的文件
│   ├── theme/           # 存放主题相关的文件
│   ├── utils/           # 存放工具函数
│   └── index.js         # 应用的入口文件
├── App.js               # 应用的根组件
├── index.js             # 应用的启动文件
├── app.json             # 应用的配置文件
├── babel.config.js      # Babel配置文件
├── package.json         # 项目的依赖和脚本
└── README.md            # 项目说明文档

2. 项目的启动文件介绍

index.js

index.js 是应用的启动文件，主要负责初始化React Native应用并加载根组件。

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

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

App.js

App.js 是应用的根组件，负责设置应用的初始状态和路由。

import React from 'react';
import { Provider } from 'react-redux';
import { NavigationContainer } from '@react-navigation/native';
import store from './src/store';
import RootNavigator from './src/navigation/RootNavigator';

const App = () => {
  return (
    <Provider store={store}>
      <NavigationContainer>
        <RootNavigator />
      </NavigationContainer>
    </Provider>
  );
};

export default App;

3. 项目的配置文件介绍

app.json

app.json 文件包含了应用的基本配置信息，如应用的名称、版本等。

{
  "name": "ReactNativeBoilerplate",
  "displayName": "React Native Boilerplate",
  "expo": {
    "name": "ReactNativeBoilerplate",
    "slug": "react-native-boilerplate",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./src/assets/icon.png",
    "splash": {
      "image": "./src/assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./src/assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    },
    "web": {
      "favicon": "./src/assets/favicon.png"
    }
  }
}

babel.config.js

babel.config.js 文件用于配置Babel编译器，确保项目能够使用最新的JavaScript语法。

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
};

package.json

package.json 文件包含了项目的依赖、脚本和其他元数据。

{
  "name": "react-native-boilerplate",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "17.0.2",
    "react-native": "

React-Native-Boilerplate🚀🎉📚 Boilerplate and Starter for React Native, Expo, NativeWind and TypeScript ⚡️ Made with developer experience first: React Native + Expo + TypeScript + ESLint + Prettier + Husky + Lint-Staged + Jest + Detox + VSCode + NativeWind项目地址:https://gitcode.com/gh_mirrors/reactn/React-Native-Boilerplate