使用 React Native 构建 IOS 和 Android 应用：入门指南-JavaScript中文网-JavaScript教程资源分享门户

React Native 是一个由 Facebook 开发的开源框架，它使得开发者能够使用 JavaScript 来构建移动应用，同时在多个移动平台上提供一致的用户界面和功能。使用 React Native 开发即可在 iOS 和 Android 平台上发布应用，这大大简化了移动应用程序员的工作，因为他们可以使用相同的代码库，而不必为每个平台单独开发新的应用。

在本文中，我们将提供您一个使用 React Native 开发应用的入门指南，包括必要的知识和操作，使您快速为iOS 和 Android 平台开发自己的应用程序。

准备工作

React Native 需要 Node、Watchman 和 React Native 的命令行工具来运行。在开始之前，请确保您已经安装了这些工具。

安装 Node

在 React Native 上开发应用程序需要使用 Node.js ，您可以从Node.js 官网下载安装包。

安装完成后，您可以通过以下命令检查 Node.js 的版本：

node -v

安装 Watchman

Watchman 是 Facebook 创建的一个监视文件系统变更的工具，它在 React Native 运行时需要使用。Watchman 可以很好地处理您的应用程序代码的监视和重构。

安装 Watchman 的步骤因您的操作系统而异，请参阅Watchman 官方网站。

安装 React Native

React Native 是使用 React 开发应用程序的框架，在安装 React Native 之前，您需要先全局安装 React 的命令行工具。您可以使用以下命令：

npm install -g react-native-cli

全局安装完成后，您可以使用以下命令安装 React Native：

npm install -g react-native

安装完成后，您可以使用以下命令检查 React Native 的版本：

react-native --version

创建新的 React Native 应用

本文将使用 Expo 帮助我们创建一个新的 React Native 应用。使用 Expo，我们可以更轻松地配置和运行 React Native 应用。让我们从初始化一个新的应用程序开始。

在控制台中选择一个新的目录，使用以下命令初始化新的 React Native 应用程序：

expo init my-app

这个命令将为您的新应用程序创建一个基本骨架。使用此命令时，您将被要求选择您的应用程序类型，这里您可以选择 Blank 或 Managed workflow 模板。

完成后，转到 my-app 目录，并使用以下命令运行应用程序：

cd my-app
npm start

这将启动一个本地服务器，您应该在终端中看到 Expo 提供的本地服务器地址。现在，您可以使用您的 iOS 或 Android 设备上的 Expo 软件程序，在 Expo 中扫描 QR 码，以在您的设备上预览您的应用程序。

在您的应用程序中添加组件和样式

使用 React Native，您可以通过编写 JavaScript 代码和 CSS 来构建应用程序的界面。

我们从添加一个简单的文本组件开始。

只需编辑您的代码就可以在文件中添加以下代码

// javascriptcn.com 代码示例
import React from 'react';
import { Text } from 'react-native';

const HelloWorldApp = () => {
  return (
    <Text>Hello world!</Text>
  );
}
export default HelloWorldApp;

该组件导出一个 HelloWorldApp 函数，该函数返回一个包含标题为“Hello world!”的 Text 组件。

运行该应用程序后，您应该会看到窗口中心显示的“Hello world!”文本。

现在让我们添加更多的组件，并为文本组件添加一些样式。

// javascriptcn.com 代码示例
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <View style={styles.box1}>
        <Text style={styles.text1}>Hello world!</Text>
        <Text style={styles.text2}>This is a React Native app</Text>
      </View>
      <View style={styles.box2}>
        <Text style={styles.text3}>Thanks for reading!</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  box1: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box2: {
    backgroundColor: 'black',
    padding: 20,
  },
  text1: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  text2: {
    fontSize: 18,
  },
  text3: {
    fontSize: 20,
    color: 'white',
  },
});

export default App;

该代码设置了三个组件、两个盒子以及三个文本元素。盒子 1 和盒子 2 使用为其内容设置的样式进行样式编排。然后，使用 StyleSheet API 创建了样式表。该样式表由多个样式对象组成，每个对象包含样式名及其相关样式属性。

在运行该应用程序时，您应该会看到一个应用程序，其会在垂直方向上分为两个盒子，分别分别包含两个文本组件。

总结

React Native 已成为移动应用的开发主流，它使用JavaScript 来实现跨平台开发的框架。在本文中，我们提供了一个快速入门指南，介绍了 React Native，包括必需的准备工作、创建新的 React Native 应用的步骤以及如何增加组件和样式。这些内容应该足以让你快速上手，在移动应用的开发中更加得心应手。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6531d0727d4982a6eb3c44da