React Native 模板项目搭建教程

React Native 模板项目搭建教程

1. 项目目录结构及介绍

react-native-template/
├── android/          # Android平台相关代码
│   └── app/           # Android应用主模块
├── ios/              # iOS平台相关代码
├── node_modules/     # 依赖包
├── src/               # 主要源代码目录
│   ├── components/    # UI组件
│   ├── screens/       # 页面组件
│   ├── assets/        # 资产文件（如图片）
│   ├── utils/         # 工具函数
│   └── index.js       # 入口文件
├── .gitignore         # Git忽略文件列表
├── package.json       # 项目配置文件
└── yarn.lock          # 包管理器锁定文件

• android 和 ios 目录分别包含了Android和iOS的原生代码。

• src 是主要的代码存放地，其中：

  • components 存放自定义React Native组件。
  • screens 存放应用程序的主要视图屏幕。
  • assets 用于存放图像和其他静态资源。
  • utils 包含各种通用的工具函数。
  • index.js 是应用程序的入口点。

• .gitignore 定义了哪些文件或目录不应被Git跟踪。

• package.json 包含项目信息、依赖库及其版本等元数据。

• yarn.lock 记录了所有安装的依赖包及其精确版本，确保在不同环境中的一致性。

2. 项目的启动文件介绍

在这个模板项目中，src/index.js 是程序的启动文件。通常它会导入你的App组件，并将其传递给AppRegistry.registerComponent，这是React Native启动应用所需的关键步骤。一个简单的index.js 文件可能如下所示：

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

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

在这里，App 是在src/App.js 或类似路径下定义的应用的主要组件。

3. 项目的配置文件介绍

package.json

package.json 文件是Node.js项目的核心配置文件，它包含以下重要部分：

• name：项目名称。
• version：项目版本号。
• dependencies：项目依赖的npm包及其版本。
• scripts：项目的脚本命令，例如start、build等。
• devDependencies：开发阶段使用的依赖包。

例如：

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "react-native start",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "test": "jest"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-native": "^0.64.2"
  },
  "devDependencies": {
    "@react-native-community/eslint-config": "^2.0.0",
    "eslint": "^7.14.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.64.0",
    "react-test-renderer": "17.0.2"
  }
}

app.json（仅iOS和Android）

app.json 文件包含了与构建设置相关的元数据，例如应用名、图标以及设备目标版本。在React Native应用中，这通常是为iOS和Android定制的部分设置。

{
  "expo": {
    "name": "MyApp",
    "slug": "my-app",
    "privacy": "public",
    "sdkVersion": "40.0.0",
    "platforms": ["ios", "android"],
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "hooks": {},
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      },
      "permissions": []
    }
  }
}

以上即为基于提供的链接创建的React Native模板项目的简单介绍和相关配置文件讲解。如果你需要更详细的帮助或有特定问题，请随时提问。