React Native Expo 模板项目教程

React Native Expo 模板项目教程

react-native-expo-templateMy starter templates for building apps with react native and expo项目地址:https://gitcode.com/gh_mirrors/re/react-native-expo-template

项目的目录结构及介绍

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

react-native-expo-templateMy starter templates for building apps with react native and expo项目地址:https://gitcode.com/gh_mirrors/re/react-native-expo-template