📅  最后修改于: 2020-12-08 06:03:08        🧑  作者: Mango

React Native是用于构建本机移动应用程序的JavaScript框架。它使用React框架，并提供大量内置组件和API。本教程是为渴望学习移动构建技能的JavaScript和React开发人员设计的。通过学习本课程，您将扩展您的React和JavaScript知识，学习一些函数式编程的概念，并准备进入移动世界。由于JavaScript世界正在向前发展，因此在本教程中，我们将保持同步并使用E...

📅  最后修改于: 2020-12-08 06:03:30        🧑  作者: Mango

为了更好地理解React Native概念，我们将从官方文档中借用几行-React Native可让您仅使用JavaScript构建移动应用程序。它使用与React相同的设计，使您可以从声明性组件组成丰富的移动UI。使用React Native，您无需构建移动Web应用程序，HTML5应用程序或混合应用程序。您构建的真实移动应用程序与使用Objective-C或Java构建的应用程序没有区别。 R...

📅  最后修改于: 2020-12-08 06:04:16        🧑  作者: Mango

您需要安装几件事来为React Native设置环境。我们将使用OSX作为构建平台。Sr.No.SoftwareDescription1NodeJS and NPMYou can follow ourNodeJS Environment Setuptutorial to install NodeJS.步骤1：安装create-react-native-app在系统中成功安装NodeJS和NPM后，...

📅  最后修改于: 2020-12-08 06:04:36        🧑  作者: Mango

如果您打开默认应用程序，则可以看到app.js文件看起来像输出你好，世界要显示一条简单的消息“ Welcome to Tutorialspoint”，请删除CSS部件，然后将要打印的消息插入<view> </ view>内的<text> </ text>标记包裹，如下所示。...

📅  最后修改于: 2020-12-08 06:05:03        🧑  作者: Mango

React Components内部的数据由state和props管理。在本章中，我们将讨论state。国家与道具之间的区别状态是可变的，而道具是不可变的。这意味着状态可以在将来更新，而道具不能更新。使用状态这是我们的根本组成部分。我们只是导入Home，它将在大多数章节中使用。App.js我们可以从模拟器文本中看到状态，如以下屏幕截图所示。更新状态由于状态是可变的，我们可以通过创建deleteSt...

📅  最后修改于: 2020-12-08 06:05:34        🧑  作者: Mango

在上一章中，我们向您展示了如何使用可变状态。在本章中，我们将向您展示如何结合状态和道具。演示组件应该通过传递道具来获取所有数据。仅容器组件应具有state。容器组件现在，我们将了解什么是容器组件以及它是如何工作的。理论现在，我们将更新容器组件。该组件将处理状态并将道具传递给呈现组件。容器组件仅用于处理状态。与视图(样式等)有关的所有功能都将在呈现组件中处理。例如果要使用上一章中的示例，则需要从re...

📅  最后修改于: 2020-12-08 06:05:56        🧑  作者: Mango

有两种方法可以在React Native中设置元素的样式。您可以使用style属性添加内联样式。但是，这不是最佳实践，因为它可能很难阅读代码。在本章中，我们将使用样式表进行样式设置。容器组件在本节中，我们将从上一章简化容器组件。App.js表现成分在下面的示例中，我们将导入StyleSheet。在文件的底部，我们将创建样式表并将其分配给样式常量。请注意，我们的样式在camelCase中，并且我们不...

📅  最后修改于: 2020-12-08 06:06:22        🧑  作者: Mango

为了适应不同的屏幕尺寸，React Native提供了Flexbox支持。我们将使用与React Native-样式一章中使用的相同的代码。我们将只更改PresentationalComponent。布局为了获得所需的布局，flexbox提供了三个主要属性-flexDirection justifyContent和alignItems。下表显示了可能的选项。PropertyValuesDescri...

📅  最后修改于: 2020-12-08 06:06:45        🧑  作者: Mango

在本章中，我们将向您展示如何在React Native中创建列表。我们将在我们的Home组件中导入List并将其显示在屏幕上。App.js为了创建一个列表，我们将使用map()方法。这将迭代一系列项目，并渲染每个项目。List.js当我们运行该应用程序时，我们将看到名称列表。<!--<img src="/react_native/images/react_native_listview.jpg" ...

📅  最后修改于: 2020-12-08 06:07:10        🧑  作者: Mango

在本章中，我们将向您展示如何在React Native中使用TextInput元素。Home组件将导入并渲染输入。App.js输入项我们将定义初始状态。定义初始状态后，我们将创建handleEmail和handlePassword函数。这些功能用于更新状态。login()函数将仅警告状态的当前值。我们还将在文本输入中添加其他一些属性以禁用自动大写字母，删除Android设备上的底部边框并设置一个占...

📅  最后修改于: 2020-12-08 06:07:30        🧑  作者: Mango

在本章中，我们将向您展示如何使用ScrollView元素。我们将再次创建ScrollViewExample.js并将其导入Home。App.jsScrollview将呈现一个名称列表。我们将在状态下创建它。ScrollView.js当我们运行该应用程序时，我们将看到名称的可滚动列表。<!--<img src="/react_native/images/react-native-scroll-vie...

📅  最后修改于: 2020-12-08 06:07:53        🧑  作者: Mango

在本章中，我们将了解如何在React Native中使用图像。新增图片让我们在src文件夹中创建一个新文件夹img。我们将在此文件夹中添加图像(myImage.png)。我们将在主屏幕上显示图像。App.js可以使用以下语法访问本地图像。<!--<img src="/react_native/images/react-native-network-image.jpg" alt="React Nat...

📅  最后修改于: 2020-12-08 06:08:19        🧑  作者: Mango

在本章中，我们将向您展示react Native中的可触摸组件。我们称它们为“可触摸的”，因为它们提供内置的动画，并且我们可以使用onPress道具来处理触摸事件。Facebook提供了Button组件，可以将其用作通用按钮。考虑以下示例以了解相同的内容。App.js如果默认的Button组件不适合您的需求，则可以使用以下组件之一。可触摸的不透明度触摸此元素将更改元素的不透明度。App.js可触摸...

📅  最后修改于: 2020-12-08 06:08:41        🧑  作者: Mango

在本章中，我们将向您展示如何在React Native中使用LayoutAnimation。动画组件我们将myStyle设置为状态的属性。此属性用于设置PresentationalAnimationComponent内部的元素的样式。我们还将创建两个函数-expandElement和坍塌元素。这些功能将从状态更新值。第一个将使用弹簧预设动画，而第二个将具有线性预设。我们也将这些作为道具传递。Exp...

📅  最后修改于: 2020-12-08 06:08:59        🧑  作者: Mango

React native提供了两种方法来帮助调试代码。在App Developer菜单中您可以通过按Command + D打开IOS模拟器上的开发人员菜单。在Android模拟器上，您需要按Command + M。重新加载-用于重新加载模拟器。您可以使用快捷键命令+ R远程调试JS-用于在浏览器开发人员控制台内部激活调试。启用实时重新加载-用于在保存代码时启用实时重新加载。调试器将在localho...