React Native Expo 模板项目教程
项目的目录结构及介绍
react-native-expo-template/
├── App.js
├── app.json
├── assets/
│ ├── icon.png
│ └── splash.png
├── babel.config.js
├── package.json
└── src/
├── components/
├── navigation/
├── screens/
└── utils/
App.js
: 项目的入口文件。app.json
: 配置应用的基本信息,如名称、版本等。assets/
: 存放静态资源,如图标和启动画面。babel.config.js
: Babel 配置文件,用于转换 JavaScript 代码。package.json
: 项目的依赖和脚本配置。src/
: 源代码目录,包含组件、导航、屏幕和工具函数等。
项目的启动文件介绍
App.js
是项目的启动文件,负责初始化应用并设置路由。以下是 App.js
的基本结构:
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './src/screens/HomeScreen';
const Stack = createStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
NavigationContainer
: 导航容器,管理应用的导航状态。createStackNavigator
: 创建堆栈导航器。HomeScreen
: 主屏幕组件。
项目的配置文件介绍
app.json
app.json
文件包含了应用的基本配置信息:
{
"expo": {
"name": "Your App Name",
"slug": "your-app-slug",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#FFFFFF"
}
},
"web": {
"favicon": "./assets/favicon.png"
}
}
}
name
: 应用名称。slug
: 应用的标识符。version
: 应用版本。orientation
: 应用的默认方向。icon
: 应用图标路径。splash
: 启动画面配置。updates
: 更新配置。assetBundlePatterns
: 资源打包模式。ios
和android
: 平台特定配置。
babel.config.js
babel.config.js
文件用于配置 Babel 转换器:
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
};
};
babel-preset-expo
: Expo 提供的 Babel 预设,用于转换 JavaScript 代码。
package.json
package.json
文件包含了项目的依赖和脚本配置:
{
"name": "react-native-expo-template",
"version": "1.0.0",
"main": "App.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"expo": "~4