使用React Native的入门指南

1. 项目目录结构及介绍

当你克隆https://github.com/facebook/react-native.git并初始化项目后，典型的React Native应用会有以下目录结构：

- .babelrc          # Babel配置文件，用于JSX和ES6转换
- .editorconfig     # 编辑器配置文件，保持代码风格一致
- .flowconfig       # Flow静态类型检查配置
- .gitignore        # Git忽略文件列表
- .prettierignore   # Prettier代码格式化忽略规则
- .prettierrc       # Prettier配置文件
- android/          # Android平台相关代码和配置
- ios/              # iOS平台相关代码和配置
- node_modules/     # 依赖的npm包
- package.json      # 项目元数据和npm依赖
- Podfile           # iOS的CocoaPods依赖管理文件
- README.md         # 项目说明文档
- index.js          # 应用入口文件
- package-lock.json # npm锁定版本文件（确保所有开发者使用相同版本的依赖）

重要文件解释

• index.js: 这是应用的主要入口点，通常包含App组件的定义和渲染。

2. 项目的启动文件介绍

在React Native中，index.js是应用程序的起点。它通常包括以下部分：

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

// 注册你的主组件
AppRegistry.registerComponent(appName, () => App);

• App: 这是你自定义的应用组件。
• name as appName从app.json中导入，用于设置应用名称和其他配置。
• AppRegistry.registerComponent负责注册你的React组件，使其可以被Native环境识别和运行。

在./App.js或类似路径下，你会找到App组件的具体实现，这是应用的核心组件。

3. 项目的配置文件介绍

.babelrc

这个文件包含了Babel的配置，用于将现代JavaScript语法转换成兼容各种浏览器的老式JavaScript。例如，允许使用JSX语法来创建React组件。

{
  "presets": ["module:metro-react-native-babel-preset"]
}

android/app/build.gradle 和 ios/AppName/AppDelegate.m

这两个文件分别用于Android和iOS平台，配置应用的基本属性和依赖关系。

• Android: build.gradle文件定义了Gradle构建配置，如应用ID、依赖库等。
• iOS: AppDelegate.m 文件包含了应用的主要代理方法，它是React Native与原生iOS系统交互的关键。

package.json

此文件包含项目元数据以及npm包依赖项。你可以在这里声明你的应用依赖，比如React Native本身以及其他第三方库。

{
  "name": "your-app-name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    // 启动命令
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-native": "^0.68.2"
  }
}

app.json (可选)

此文件用于提供一些应用的元信息，例如应用的名称、图标、显示语言等。对于React Native CLI创建的项目，该文件可能不在根目录，而是位于android/app/src/main/res/values或ios/YourAppName/Info.plist里。

{
  "expo": {
    "name": "Your App Name",
    "slug": "your-app-slug",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      // ...
    },
    "updates": {
      // ...
    },
    "assetBundlePatterns": [
      // ...
    ],
    "ios": {
      // ...
    },
    "android": {
      // ...
    },
    "web": {
      // ...
    },
    "extra": {
      // ...
    }
  }
}

以上就是React Native项目的基本结构及其核心文件的简介。要启动项目，你可以根据操作系统执行相应的命令，比如在终端中运行npx react-native run-android或npx react-native run-ios。