0Pricing
React Native Academy · 课时

了解项目结构

浏览 Expo 项目的文件夹布局，了解 app.json、package.json 和 App 组件的作用，并完成您的第一次代码修改。

了解项目结构 是 CoddyKit 上的免费 React Native Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Native Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Native Academy 课程共包含 4 节课。

本课时的部分内容尚未翻译，以英文显示。

The Root of Every Expo Project

Every Expo project has a tidy layout that splits config, code, assets, and dependencies. Config files sit at the root, your code in App.js or src/, and packages in node_modules/.

MyFirstApp/
├── App.js             # Entry component
├── app.json           # Expo configuration
├── package.json       # Dependencies + scripts
├── package-lock.json  # Locked dependency tree
├── babel.config.js    # Transpiler config
├── .gitignore         # Files to exclude from git
├── assets/            # Static files
│   ├── icon.png
│   ├── splash.png
│   └── adaptive-icon.png
└── node_modules/      # Installed packages (auto-managed)

The assets/ Folder

The assets/ folder holds static files bundled with your app — images, fonts, audio. Reference a local image with require(), and Expo optimizes it during the build. See the code.

import { Image } from 'react-native';

// Referencing a local asset
<Image source={require('./assets/icon.png')} />

// Referencing a remote image
<Image source={{ uri: 'https://example.com/photo.jpg' }} />

// Loading a font from assets/
import * as Font from 'expo-font';
await Font.loadAsync({
  'Roboto-Bold': require('./assets/fonts/Roboto-Bold.ttf'),
});

App.js as the Entry Point

React Native needs one entry point: App.js, which must export a default component. As your app grows, App.js becomes a thin shell wiring up navigation, state, and themes.

// A typical App.js as the project grows
import { NavigationContainer } from '@react-navigation/native';
import { Provider } from 'react-redux';
import { ThemeProvider } from './context/ThemeContext';
import RootNavigator from './navigation/RootNavigator';
import store from './store';

export default function App() {
  return (
    <Provider store={store}>
      <ThemeProvider>
        <NavigationContainer>
          <RootNavigator />
        </NavigationContainer>
      </ThemeProvider>
    </Provider>
  );
}

Organizing Source Files in src/

Small apps live at the root, but as yours grows, add a src/ folder. Common subfolders: screens/, components/, navigation/, hooks/, and services/. It keeps things easy to find.

src/
├── screens/
│   ├── HomeScreen.tsx
│   ├── ProfileScreen.tsx
│   └── SettingsScreen.tsx
├── components/
│   ├── Button.tsx
│   ├── Card.tsx
│   └── Avatar.tsx
├── navigation/
│   └── RootNavigator.tsx
├── hooks/
│   └── useFetchUser.ts
├── services/
│   └── api.ts
└── utils/
    └── formatDate.ts

package.json Deep Dive

package.json is your project manifest: dependencies for runtime, devDependencies for tooling, and scripts for shortcuts. Never edit node_modules — npm install rebuilds it.

// package.json structure
{
  'name': 'my-first-app',
  'version': '1.0.0',
  'main': 'node_modules/expo/AppEntry.js',
  'scripts': {
    'start': 'expo start',
    'test': 'jest',
    'lint': 'eslint .'
  },
  'dependencies': {
    'expo': '~50.0.0',
    'react': '18.2.0',
    'react-native': '0.73.6'
  },
  'devDependencies': {
    '@types/react': '~18.2.0',
    'typescript': '^5.1.3',
    'jest': '^29.0.0'
  }
}

app.json vs app.config.js

Need dynamic config — like reading env variables at build time? Swap app.json for app.config.js, a JS file that exports your config using process.env.

// app.config.js (dynamic configuration)
export default {
  name: 'My App',
  slug: 'my-app',
  version: '1.0.0',
  extra: {
    apiUrl: process.env.API_URL || 'https://api.myapp.com',
    environment: process.env.APP_ENV || 'production',
  },
  ios: {
    bundleIdentifier: 'com.mycompany.myapp',
  },
  android: {
    package: 'com.mycompany.myapp',
  },
};

.gitignore and What to Exclude

The .gitignore file tells Git what to skip. Always exclude node_modules/ (npm rebuilds it), .expo/, and any secret files like .env. Committing node_modules bloats your repo.

# Default .gitignore for Expo
node_modules/
.expo/
dist/
npm-debug.*
*.jks
*.p8
*.p12
*.key
*.mobileprovision
*.orig.*
web-build/

# Environment files with secrets
.env
.env.local
.env.production

# macOS
.DS_Store

babel.config.js and Transpilation

The babel.config.js file controls how Babel transpiles your code. The babel-preset-expo preset covers the basics; you extend it with plugins like path aliases.

// babel.config.js
module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      // Path aliases: @/components → src/components
      ['module-resolver', {
        root: ['./src'],
        alias: { '@': './src' },
      }],
      // Reanimated plugin MUST be last
      'react-native-reanimated/plugin',
    ],
  };
};

The node_modules Directory

node_modules/ holds every package you depend on — often hundreds of megabytes. Never edit it directly. If things break, the classic fix is delete it and run npm install.

# If things break, a clean install often fixes it:
rm -rf node_modules
npm install

# Also clear the Metro cache
npx expo start --clear

# Check how many packages are installed
ls node_modules | wc -l

# See the dependency tree
npm list --depth=1

ios/ and android/ Folders in Bare Workflow

The managed workflow hides the ios/ and android/ folders — Expo handles native code. Run expo prebuild to generate them: the Xcode project and the Gradle build files.

# Generate native folders (bare workflow)
npx expo prebuild

# This creates:
ios/
├── MyApp/
│   ├── AppDelegate.swift
│   ├── Info.plist
│   └── Images.xcassets/
└── MyApp.xcodeproj/

android/
├── app/
│   ├── src/main/
│   │   ├── AndroidManifest.xml
│   │   └── java/.../MainApplication.kt
│   └── build.gradle
└── build.gradle

Expo Router and the app/ Directory

Newer projects use Expo Router, file-based routing like Next.js. Each file in app/ becomes a route — index.tsx is /, profile.tsx is /profile. No manual navigator needed.

// With Expo Router, file structure = routes:
app/
├── _layout.tsx     // Root layout (NavigationContainer)
├── index.tsx       // Screen at route '/'
├── profile.tsx     // Screen at route '/profile'
└── settings/
    ├── _layout.tsx // Settings-section layout
    └── index.tsx   // Screen at '/settings'

// app/index.tsx
import { Text, View } from 'react-native';
export default function HomeScreen() {
  return <View><Text>Home</Text></View>;
}

Quick Check

Test your understanding of React Native Mobile Development concepts from this lesson.

Lesson Recap

You mapped the project: assets/ holds media, app.json controls config, and src/screens and src/components organize your growing code. Next: the View component! 📦

常见问题解答

「了解项目结构」课时是免费的吗？

是的 — 「了解项目结构」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Native Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Native Academy 课程共包含 4 节课。

「了解项目结构」这节课中我会学到什么？

浏览 Expo 项目的文件夹布局，了解 app.json、package.json 和 App 组件的作用，并完成您的第一次代码修改。 你通过在浏览器中直接运行的动手代码来练习 React Native Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Native Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Native Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。

「了解项目结构」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Native Academy 课中编写并运行代码吗？

能。每节 React Native Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 安装 Node、Expo CLI 与模拟器
  2. 创建您的第一个 Expo 项目
  3. 在设备与模拟器上运行
  4. 了解项目结构
← 返回 React Native Academy