React Native 第一个应用程序 Hello World

让我们在 Windows 上构建我们的第一个 React Native 应用程序，将 Windows 作为开发操作系统，Android 作为目标操作系统。

创建 React Native 应用程序的步骤

1. 首先，您必须启动您的模拟器（Android 模拟器）并使其运行。

2. 在您的任何驱动器中创建一个目录 (ReactNative)。

3. 打开 "命令提示符" 并转到您的 ReactNative 目录。

4. 编写命令 react-native init FirstApp 来初始化您的应用程序 "FirstApp"。

5. 转到您的目录位置 "FirstApp" 并运行命令 react-native run-android。它将启动 Node 服务器并在虚拟设备模拟器中启动您的应用程序。

输出

查看 React Native 应用程序的代码

打开您最喜欢的 JavaScript 支持的 IDE 之一，并在您的 FirstApp 应用程序中打开 App.js 文件。

默认 React Native 第一个应用程序的代码。

App.js

index.js

创建一个简单的 React Native "Hello World" 应用程序

通过编辑 FirstApp 的 App.js 文件，创建一个简单的 "Hello World" 应用程序。

通过简单地按两次 "R" 或 Ctrl+M（重新加载） 来保存应用程序并重新加载。

App.js

输出

编辑简单的 React Native "Hello World" 应用程序

使用 StyleSheet 编辑 React Native "Hello World" 应用程序。

App.js

输出

React Native 代码解释

• import React, {Component} from 'react': 从 react 模块导入库和其他组件，并将它们分配给变量 React。
• const instruction: 设置以显示特定于平台的的消息。
• export default class App extends Component: 定义扩展 React 组件的类。 export default class 修饰符使该类“公共”。 这段代码定义了代表用户界面的组件。
• render(): 一个返回 React 元素的函数。
• return(): 返回布局和 UI 组件的结果。
• View: 一个支持布局可访问性控件的容器。 它是构建 UI 的基本组件。
• Text: 用于显示文本的 React 组件。
• style: 用于使用 StyleSheet 为组件设置样式的属性。
• styles: 用于设计单个组件。
• {styles.instructions}>{instructions}
• const styles = StyleSheet.create({}): StyleSheet 类创建控制组件布局和外观的样式对象。 它类似于用于 Web 的层叠样式表 (CSS)。