开源项目 `create-react-native-app` 使用教程

开源项目 create-react-native-app 使用教程

create-react-native-appCreate React Native apps that run on iOS, Android, and web项目地址:https://gitcode.com/gh_mirrors/cr/create-react-native-app

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

create-react-native-app 生成的项目目录结构如下：

my-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── manifest.json
├── src/
│   ├── App.js
│   ├── index.js
│   ├── App.test.js
│   ├── app.json
│   └── ...
├── .gitignore
├── package.json
├── README.md
└── yarn.lock

目录结构介绍

• node_modules/: 存放项目依赖的模块。
• public/: 存放公共资源文件，如 index.html 和 manifest.json。
• src/: 存放源代码文件，包括主要的 App.js 和入口文件 index.js。
• .gitignore: 指定不需要被版本控制的文件和目录。
• package.json: 项目的配置文件，包含依赖、脚本等信息。
• README.md: 项目的说明文档。
• yarn.lock: 锁定依赖版本的文件。

2. 项目的启动文件介绍

项目的启动文件主要是 src/index.js，其主要作用是引入并渲染 App.js 组件。

import { registerRootComponent } from 'expo';
import App from './App';

registerRootComponent(App);

启动文件介绍

• registerRootComponent(App): 注册 App 组件作为根组件，使其能够在 Expo 环境中运行。

3. 项目的配置文件介绍

项目的配置文件主要是 app.json 和 package.json。

app.json

app.json 文件包含了应用的配置信息，如名称、版本、图标等。

{
  "expo": {
    "name": "my-app",
    "slug": "my-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

package.json

package.json 文件包含了项目的依赖、脚本等信息。

{
  "name": "my-app",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "~42.0.1",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
    "react-native-web": "~0.13.12"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0"
  },
  "private": true
}

配置文件介绍

• app.json: 配置应用的基本信息和平台特定设置。
• package.json: 管理项目的依赖和脚本命令。

create-react-native-appCreate React Native apps that run on iOS, Android, and web项目地址:https://gitcode.com/gh_mirrors/cr/create-react-native-app