React Native Windows 示例项目教程

React Native Windows 示例项目教程

react-native-windows-samplesA repository showcasing React Native samples and templates for Windows, macOS, and Surface Duo.项目地址:https://gitcode.com/gh_mirrors/re/react-native-windows-samples

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 使用。

react-native-windows-samplesA repository showcasing React Native samples and templates for Windows, macOS, and Surface Duo.项目地址:https://gitcode.com/gh_mirrors/re/react-native-windows-samples