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": "