React Native 项目教程

1. 项目目录结构及介绍

React Native 项目的目录结构如下：

react-native/
├── android/
├── ios/
├── node_modules/
├── scripts/
├── tools/
├── .babelrc
├── .clang-format
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .flowconfig
├── .gitignore
├── .prettierignore
├── .prettierrc
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── ECOSYSTEM.md
├── Gemfile
├── Gemfile.lock
├── LICENSE
├── LICENSE-docs
├── README.md
├── build.gradle.kts
├── gradle.properties
├── gradlew
├── gradlew.bat
├── jest.config.js
├── package.json
├── react-native.code-workspace
├── runXcodeTests.sh
├── settings.gradle.kts
└── yarn.lock

目录结构介绍

• android/：包含 Android 项目的所有文件。
• ios/：包含 iOS 项目的所有文件。
• node_modules/：包含项目依赖的 Node.js 模块。
• scripts/：包含一些用于构建和测试的脚本。
• tools/：包含一些用于开发和测试的工具。
• .babelrc：Babel 配置文件，用于 JavaScript 代码的转换。
• .clang-format：Clang 格式化配置文件。
• .editorconfig：编辑器配置文件，用于统一代码风格。
• .eslintignore：ESLint 忽略文件列表。
• .eslintrc.js：ESLint 配置文件。
• .flowconfig：Flow 类型检查配置文件。
• .gitignore：Git 忽略文件列表。
• .prettierignore：Prettier 忽略文件列表。
• .prettierrc：Prettier 配置文件。
• CHANGELOG.md：项目更新日志。
• CODE_OF_CONDUCT.md：项目行为准则。
• CONTRIBUTING.md：贡献指南。
• ECOSYSTEM.md：生态系统介绍。
• Gemfile：Ruby 依赖配置文件。
• Gemfile.lock：Ruby 依赖锁定文件。
• LICENSE：项目许可证。
• LICENSE-docs：文档许可证。
• README.md：项目介绍和使用指南。
• build.gradle.kts：Gradle 构建配置文件。
• gradle.properties：Gradle 属性配置文件。
• gradlew：Gradle 包装器脚本。
• gradlew.bat：Windows 下的 Gradle 包装器脚本。
• jest.config.js：Jest 测试配置文件。
• package.json：Node.js 项目配置文件。
• react-native.code-workspace：VSCode 工作区配置文件。
• runXcodeTests.sh：运行 Xcode 测试的脚本。
• settings.gradle.kts：Gradle 设置配置文件。
• yarn.lock：Yarn 依赖锁定文件。

2. 项目启动文件介绍

React Native 项目的启动文件主要包括以下几个部分：

index.js 或 index.ts

这是 React Native 项目的入口文件，通常位于项目根目录下。它负责初始化 React Native 应用，并将其挂载到指定的 DOM 节点上。

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);

App.js 或 App.tsx

这是 React Native 应用的主组件文件，通常也位于项目根目录下。它包含了应用的主要 UI 和逻辑。

import React from 'react';
import { View, Text } from 'react-native';

const App = () => {
  return (
    <View>
      <Text>Hello, React Native!</Text>
    </View>
  );
};

export default App;

3. 项目配置文件介绍

React Native 项目的配置文件主要包括以下几个部分：

package.json

这是 Node.js 项目的配置文件，包含了项目的依赖、脚本命令等信息。

{
  "name": "react-native-app",
  "version": "1.0.0",
  "scripts": {
    "start": "react-native start",
    "android": "react-native run-android",
    "ios": "react-native run-ios"
  },
  "dependencies": {
    "react": "17.0.2",
    "react-native": "0.66.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "babel-jest": "^26.6.3",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.66.0",
    "react-test-renderer": "17.0.2"
  }
}

babel.config.js

这是 Babel 的配置文件，用于配置 JavaScript 代码的转换规则。

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

metro.config.js

这是 Metro 打包工具的配置文件，用于配置 React Native 项目的打包规则。

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
};

app.json

这是 React Native 应用的配置文件，包含了应用的基本信息。

{
  "name": "MyApp",
  "displayName": "MyApp"
}

通过以上配置文件和目录结构，你可以更好地理解和使用 React Native 项目。