React Native允许您使用JavaScript和React构建本机移动应用程序，React是Facebook构建的用户界面库。它使得编写Android和iOS设备的代码变得简单，而不必精通java（Android）和C++ +目标C（iOS）。

以下是您需要知道的一切，以便与React Native一起启动和运行。

反应本机先决条件

如果您已经熟悉React，那么就不需要开始使用React Native了。您需要一个internet连接，并且您需要能够通过网络连接到您的计算机。您可能还希望阅读我们关于Linux命令行基础知识或初学者Windows命令行的指南。

安装react native

安装React Native再简单不过了，但您需要安装节点.js第一。

我们已经讨论了节点.js早在2013年，但简而言之，它允许您使用JavaScript编写“合适的”桌面和服务器应用程序。

去医院节点.js下载页面，然后选择Windows或macOS安装程序。Linux版本也可以使用，但是您需要做更多的工作才能安装这些版本。

下载后，运行安装程序，接受许可协议，然后安装。你不仅得到节点.js，但您也会得到npm，它是一个JavaScript包管理器。有了它，您可以安装其他软件包——比如React Native！

开始使用React Native最简单的方法是使用create React Native app命令行程序。打开一个新的终端或控制台，并使用npm安装它：

npm install -g create-react-native-app

如果在安装create react native app时遇到问题，则可能需要修复npm权限。

一旦安装，你就可以开始创建你的应用了。

创建应用程序的简单方法

现在您已经安装了create react native app，您可以创建第一个app。创建一个新文件夹来存储项目，并在命令行中导航到它。

使用create react native app实用程序创建应用程序。此命令将创建名为FirstAndroidApp的应用程序：

create-react-native-app FirstAndroidApp

React Native基于项目名称（FirstAndroidApp）为您创建了一个新文件夹。导航到此文件夹，然后运行：

npm start

这将启动开发服务器。

您将看到许多重新启动服务器的选项，以及QR码和服务器IP地址。你们都准备好用**跑步了。

在设备上运行应用程序

要在Android设备上测试你的应用程序，你需要安装一个名为Expo的应用程序。这将连接到您的计算机，并加载您的应用程序。您所做的任何更改都将重新加载应用程序。它的工作非常好，是一个很好的方式来开发你的应用程序。

一旦你安装了Expo，确保你的**和你的电脑在同一个网络上。它不能在不同的网络上或防火墙后工作。

打开Expo应用程序，选择“扫描二维码”。将**摄像头对准命令行中的二维码，几秒钟后，你的应用程序就会出现在**上。回到命令行，您将看到几个新的状态。这些信息告诉您应用程序已经完成构建，并且正在您的设备上运行。

我们开始写代码吧！

你好，世界！

在FirstAndroidApp文件夹中，React Native创建了多个文件。有一个node\u modules文件夹，用于存储您可以安装以支持应用程序的节点包。打开应用程序.js在您最喜爱的文本编辑器中。

这个文件包含24行代码。有几个导入、一个名为App的类和一个样式表：

import React from 'react';import { StyleSheet, Text, View } from 'react-native';export default class App extends React.Component { render() { return ( <View style={styles.container}> <Text>Open up App.js to start working on your app!</Text> <Text>Changes you make will automatically reload.</Text> <Text>Shake your phone to open the developer menu.</Text> </View> ); }}c***t styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', },});

这看起来可能很复杂，但是一旦您熟悉了React本机语法，就很容易了。很多语法与HTML和CSS相似。

让我们深入了解一下代码。这些导入确保您的应用程序能够访问所需的React本地组件，该组件需要工作：

import React from 'react';import { StyleSheet, Text, View } from 'react-native';

大括号（{StyleSheet，Text，View}）指定要导入的多个文件。

你必须有这个类应用程序。内部返回是**将显示的代码。这个标记类似于HTML，但由自定义的React本地标记组成。

视图标记是存储其他容器的位置。风格={样式.容器}属性将此视图配置为使用文件底部的样式表。

视图标记中有多个文本标记。必须在文本标记中放置文本。如果不这样做，React Native将无法工作。

底部是定义为常量的styles对象。这与CSS非常相似，只是它有更多面向对象的外观。但是，您需要使用React本机特定语法。

让我们修改这个代码。让我们改变周围的颜色，以及文字。

在CSS中，将backgroundColor更改为绿色（或任何您喜欢的颜色）：

backgroundColor: '#4caf50',

注意十六进制代码必须在单引号中。让我们改进一下课文。创建一个名为text的新样式。添加颜色、字体大小和字体权重属性：

text: { color: '#fff', fontSize: 34, fontWeight: 'bold'}

将此添加到容器元素下面，用逗号分隔：

c***t styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#4caf50', alignItems: 'center', justifyContent: 'center', }, text: { color: '#fff', fontSize: 34, fontWeight: 'bold', }});

最后，在App类中更改文本：

<Text style={styles.text}>Hello, World!</Text>

通过设置style属性，可以告诉React Native根据先前在文本样式中定义的样式设置文本样式。

玩商店，我们来了！

虽然我们只介绍了非常基础的东西，但是现在你已经有了坚实的基础来建立你的令人敬畏的应用程序。不过，不要停在那里，看看React原生文档，以获得关于每个React本地特性的全面信息。

别忘了阅读我们的best-React教程指南来获取一些背景信息，如果你喜欢构建游戏，为什么不看看如何用Buildbox编写一个****呢？