开源项目 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
: 管理项目的依赖和脚本命令。