开源项目启动与配置教程

一、项目目录结构及介绍

expo-disneyplus 项目采用清晰的目录结构，以下为项目的主要目录及其功能介绍：

expo-disneyplus/
├── android/          # 安卓平台相关代码和资源
├── ios/              # iOS平台相关代码和资源
├── src/              # 源代码目录
│   ├── components/   # 通用组件
│   ├── screens/      # 页面组件
│   ├── navigation/   # 导航相关
│   ├── utils/        # 工具类
│   └── ...           # 其他源代码
├── assets/           # 资源目录，包括图片、字体等
├── app.json          # 项目配置文件
├── package.json      # 项目依赖和脚本
└── ...              # 其他辅助文件和目录

二、项目的启动文件介绍

项目的启动文件为 src/App.js，该文件是整个应用的入口。以下为启动文件的基本内容：

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './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;

在这个文件中，我们使用了 React Navigation 来创建一个堆栈导航器，定义了应用的首页 HomeScreen。

三、项目的配置文件介绍

项目的主要配置文件为 app.json 和 package.json。

1. app.json 文件包含了一些关于应用的基本信息，例如应用的名称、图标、版本等。以下为配置文件的一个示例：

{
  "expo": {
    "name": "expo-disneyplus",
    "slug": "expo-disneyplus",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    // 其他配置项
  }
}

2. package.json 文件包含了项目的依赖和脚本。以下为配置文件的一个示例：

{
  "name": "expo-disneyplus",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start": "expo start",
    "android": "expo run:android",
    "ios": "expo run:ios",
    // 其他脚本
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "^1.15.0",
    "expo": "^44.0.0",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.0",
    "react-native-web": "^0.14.0",
    // 其他依赖
  }
}

在这个文件中，我们定义了启动项目、运行安卓和iOS平台的脚本，以及项目所需的依赖库。通过运行 npm start 或 yarn start 可以启动项目。