Start UI [native] 使用教程

1. 项目的目录结构及介绍

Start UI [native] 是一个基于 React Native 的 UI 起步项目，其目录结构如下：

• android: Android 平台相关的文件和目录。
• ios: iOS 平台相关的文件和目录。
• scripts: 脚本文件，用于自动化一些开发任务。
• src: 源代码目录，包含所有的组件、服务和工具函数等。
• .github/workflows: GitHub Actions 工作流文件，用于自动化测试、构建等任务。
• .storybook: Storybook 配置和组件故事文件。
• .vscode: Visual Studio Code 的项目配置文件。
• assets: 资源文件，如图标、图片等。
• app.json: 应用配置文件，定义了应用的名称、图标等信息。
• babel.config.js: Babel 配置文件，用于配置 JavaScript 的编译选项。
• eas.json: Expo App Services 配置文件。
• metro.config.js: Metro 配置文件，用于配置 React Native 的打包工具。
• package.json: 项目依赖和脚本配置文件。
• pnpm-lock.yaml: Pnpm 锁文件，确保项目依赖的一致性。
• tsconfig.json: TypeScript 配置文件。
• README.md: 项目说明文件。
• LICENSE: 项目许可证文件。

2. 项目的启动文件介绍

Start UI [native] 的启动文件通常是在 src 目录下的 App.tsx 文件。这个文件是应用的入口点，它定义了应用的顶层组件，并负责渲染应用的界面。

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { AppNavigation } from './navigation/AppNavigation';

export default function App() {
  return (
    <View style={styles.container}>
      <AppNavigation />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

在上面的代码中，App 组件使用 View 组件作为根容器，并包含了 AppNavigation 组件，后者负责应用的导航。

3. 项目的配置文件介绍

app.json

app.json 文件用于定义应用的元数据，例如应用的名称、图标和启动画面等。

{
  "name": "StartUI Native",
  "displayName": "StartUI Native",
  "icon": "./assets/icon.png",
  "version": "1.0.0",
  "orientation": "portrait",
  "splash": {
    "image": "./assets/splash.png",
    "resizeMode": "contain",
    "backgroundColor": "#ffffff"
  }
}

babel.config.js

babel.config.js 文件用于配置 Babel，一个 JavaScript 的编译器，用于将现代 JavaScript 代码转换为广泛兼容的代码。

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
};

metro.config.js

metro.config.js 文件用于配置 Metro，这是 React Native 的打包工具。

const { getMetroConfig } = require('react-native-scripts');

module.exports = (config) => {
  const metroConfig = getMetroConfig(config);
  // 可以在这里添加自定义配置
  return metroConfig;
};

tsconfig.json

tsconfig.json 文件用于配置 TypeScript 编译器。

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitAny": true,
    "moduleResolution": "node"
  },
  "include": ["src/**/*"]
}

以上是 Start UI [native] 的基本目录结构、启动文件和配置文件的介绍。使用这个项目模板可以快速搭建一个 React Native 应用的基础框架。