React Native Windows 示例项目教程
1. 项目的目录结构及介绍
React Native Windows 示例项目的目录结构如下:
react-native-windows-samples/
├── apps/
│ ├── Calculator/
│ ├── ControlGallery/
│ ├── Samples/
│ └── Weather/
├── docs/
├── packages/
│ ├── react-native-windows/
│ └── react-native-win32/
└── scripts/
目录介绍
- apps/: 包含多个示例应用程序,如计算器、控件画廊和天气应用。
- docs/: 包含项目的文档文件。
- packages/: 包含 React Native Windows 的核心包和 Win32 包。
- scripts/: 包含用于构建和测试的脚本。
2. 项目的启动文件介绍
每个示例应用程序的启动文件通常位于 apps/<app-name>/
目录下。以 Calculator
为例,启动文件为 index.js
。
Calculator 示例的启动文件
// apps/Calculator/index.js
import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';
AppRegistry.registerComponent(appName, () => App);
启动文件介绍
- AppRegistry.registerComponent: 注册应用程序的根组件。
- App: 导入的根组件。
- app.json: 包含应用程序的名称和其他配置信息。
3. 项目的配置文件介绍
每个示例应用程序的配置文件通常位于 apps/<app-name>/
目录下。以 Calculator
为例,配置文件为 app.json
。
Calculator 示例的配置文件
// apps/Calculator/app.json
{
"name": "Calculator",
"displayName": "Calculator"
}
配置文件介绍
- name: 应用程序的内部名称。
- displayName: 应用程序的显示名称。
这些配置文件用于定义应用程序的基本信息,并在启动时由 AppRegistry
使用。