React Native允许您使用JavaScript和React构建本机移动应用程序,React是Facebook构建的用户界面库。它使得编写Android和iOS设备的代码变得简单,而不必精通java(Android)和C++ +目标C(iOS)。
以下是您需要知道的一切,以便与React Native一起启动和运行。
如果您已经熟悉React,那么就不需要开始使用React Native了。您需要一个internet连接,并且您需要能够通过网络连接到您的计算机。您可能还希望阅读我们关于Linux命令行基础知识或初学者Windows命令行的指南。
安装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 FirstAndroidAppReact 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编写一个****呢?
...个React web框架,它处理前端和后端! 移动应用程序。没错,JavaScript可以用来创建Android和iOS应用程序!不仅网络应用程序包在移动引擎中,而且还包括真正的本地应用程序。请参阅我们的JavaScript移动框架的汇总,...
...期内没有放缓的迹象。人们喜欢自己的**,也需要**上的应用程序。这是一个狭小的竞争空间,但突破应用程序仍然出现在每一天。 ...
如果你想开始**移动应用程序,有三种主要语言可供选择:用于Android应用程序的Java、用于iOS应用程序的Swift或用于跨平台应用程序的JavaScript。 ...
...合),在运行时将其编译为特定于平台的指令,然后执行应用程序。这个过程被恰当地命名为即时编译。在JVM概述中了解更多信息。 ...
...加起来共有3个完整的学时。您将了解启动和运行基本React应用程序所需的一切(即React生态系统、NPM、Babel和Webpack)、驱动React应用程序的核心概念和生命周期、如何正确编写组件以及如何传递数据。 ...
...了。以前从来没有这么多有效的方法来创建出色的Android应用程序。 ...
...by编程语言构建的。Ruby是一种通用语言,对于许多不同的应用程序都是可靠的。Jekyll是一个Ruby Gem,它是Ruby内部构建的一个代码包,可以简化终端的安装。 ...
...,你的**上有更多的蓝牙功能。下面是一些很好的提示和应用程序,可以让Android设备上的蓝牙发挥更大的作用。 ...
...。因为web组件是纯HTML和JavaScript,所以它们与普通JavaScript应用程序以及框架兼容。你可以在webcomponents.org网站. ...