【亲测免费】 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",
    "