Expo 项目教程
1. 项目的目录结构及介绍
Expo 项目的目录结构通常包含以下几个主要部分:
/expo
├── app
│ ├── components
│ ├── screens
│ ├── navigation
│ ├── assets
│ ├── App.js
│ └── config.js
├── .gitignore
├── package.json
├── README.md
└── app.json
目录结构介绍
- app: 包含应用程序的主要代码。
- components: 存放可重用的 React 组件。
- screens: 存放应用程序的各个屏幕组件。
- navigation: 存放导航相关的配置和组件。
- assets: 存放静态资源,如图片、字体等。
- App.js: 应用程序的入口文件。
- config.js: 应用程序的配置文件。
- .gitignore: 指定 Git 版本控制系统忽略的文件和目录。
- package.json: 包含项目的依赖和脚本。
- README.md: 项目的说明文档。
- app.json: Expo 项目的配置文件。
2. 项目的启动文件介绍
Expo 项目的启动文件通常是 App.js
。这个文件是应用程序的入口点,负责初始化应用程序并渲染根组件。
App.js 示例
import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text>Welcome to Expo!</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
启动文件介绍
- 导入依赖: 导入 React 和 Expo 提供的组件和 API。
- 定义主组件: 定义一个名为
App
的函数组件,并返回应用程序的 UI。 - 样式定义: 使用
StyleSheet.create
方法定义组件的样式。
3. 项目的配置文件介绍
Expo 项目的配置文件主要是 app.json
和 package.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: 应用程序的 URL 标识符。
- version: 应用程序的版本号。
- orientation: 应用程序的默认方向。
- icon: 应用程序的图标路径。
- splash: 启动画面配置。
- updates: 更新配置。
- assetBundlePatterns: 资源打包模式。
- ios: iOS 平台特定配置。
- android: Android 平台特定配置。
- web: Web 平台特定配置。
package.json 示例
{
"name": "your-app-name",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"