Create React Native App 项目教程

万桃琳

于 2024-09-04 07:27:05 发布

阅读量713

点赞数 25

本文链接：https://blog.csdn.net/gitblog_00876/article/details/141879412

版权

Create React Native App 项目教程

create-react-native-app项目地址:https://gitcode.com/gh_mirrors/cre/create-react-native-app

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

Create React Native App（CRNA）生成的项目结构如下：

my-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── manifest.json
├── src/
│   ├── App.js
│   ├── index.js
│   └── ...
├── .gitignore
├── .watchmanconfig
├── app.json
├── babel.config.js
├── package.json
└── README.md

目录结构介绍：

node_modules/: 包含项目依赖的所有npm包。
public/: 包含公共资源文件，如index.html和manifest.json。
src/: 包含项目的源代码，如App.js和index.js。
.gitignore: 指定Git版本控制系统忽略的文件和目录。
.watchmanconfig: 用于配置Facebook的Watchman工具。
app.json: 包含应用的配置信息，如名称和slug。
babel.config.js: Babel的配置文件，用于转译JavaScript代码。
package.json: 包含项目的依赖和脚本。
README.md: 项目的说明文档。

2. 项目的启动文件介绍

`index.js`

index.js是项目的入口文件，负责启动应用。其主要内容如下：

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

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

文件介绍：

import { AppRegistry } from 'react-native': 导入React Native的AppRegistry模块。
import App from './App': 导入应用的主组件App.js。
import { name as appName } from './app.json': 从app.json文件中导入应用的名称。
AppRegistry.registerComponent(appName, () => App): 注册应用的主组件，使其可以在设备上运行。

3. 项目的配置文件介绍

`app.json`

app.json文件包含了应用的配置信息，如名称和slug。示例如下：

{
  "name": "my-app",
  "displayName": "MyApp"
}

配置项介绍：

name: 应用的内部名称。
displayName: 应用在设备上显示的名称。

`babel.config.js`

babel.config.js文件用于配置Babel转译器。示例如下：

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

配置项介绍：

presets: 指定Babel使用的预设，metro-react-native-babel-preset是React Native推荐的预设。

`package.json`

package.json文件包含了项目的依赖和脚本。示例如下：

{
  "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": "16.13.1",
    "react-native": "0.63.2"
  },
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/runtime": "^7.11.2",
    "babel-jest": "^26.3.0",
    "jest": "^26.4.2",
    "react-test-renderer": "16.13.1"
  },
  "jest": {
    "preset": "react-native"
  }
}