在开发应用程序时，我们希望能够在不同的屏幕之间切换，这由 React Navigation 处理。要进行页面导航，我们需要安装一些包，如下所示：npm install @react-navigation/native @react-navigation/stack npm install @react-native-community/masked-view react-native-screens react-native-safe-area-context react-native-gesture-handler 安装完成后，让我们继续进行 React Native 中导航的下一步设置。在您的应用程序项目中创建一个名为 pages/ 的文件夹。创建 2 个 js 文件 HomePage.js 和 AboutPage.js。pages/HomePage.jsimport * as React from 'react'; import { Button, View, Alert, Text } from 'react-native'; const HomeScreen = ({ navigation }) ... 阅读更多

当您的列表规模非常庞大时，VirtualizedList 组件是最佳选择。VirtualizedList 有助于提高性能和内存使用效率。当用户滚动时，数据才会显示给用户。VirtualizedList 的基本组件如下：重要 VirtualizedList 属性属性描述renderItemVirtualizedList 内将渲染来自数据项的项目。data要显示的数据。getItem用于从数据中获取单个项目的函数。getItemCount获取数据项的计数。initialNumToRender开始时渲染的次数。keyExtractor为指定索引的每个项目考虑的唯一键。这是一个 VirtualizedList 的工作示例。示例：使用 VirtualizedList 显示数据要使用…… 阅读更多

React Native 的 Picker 组件类似于下拉菜单，允许您从给定的多个选项中选择一个值。Picker 组件的基本用法如下：……要使用 Picker 组件，您首先需要从 react-native 中导入它，如下所示：import { Picker } from 'react-native'Picker 属性序号属性 & 说明1enabled它接受布尔值。如果设置为 false，则选择器将被禁用，用户将无法选择项目。2itemStyle应用于项目的样式。3mode此属性…… 阅读更多

SafeAreaView 组件旨在在设备的安全边界内显示您的内容。它负责添加填充，并确保不会用导航栏、工具栏、选项卡栏等遮盖您的内容。此组件仅适用于 iOS 设备，以下是一个工作示例。让我们通过一个示例来了解使用 SafeAreaView 的优势。考虑以下示例，它使用 View 组件来显示文本“欢迎来到 Tutorialspoint！”。示例在 View 组件内显示文本“欢迎来到 Tutorialspoint！”View 组件上使用了 style flex: 1。…… 阅读更多

进度条是一种告诉用户内容将在一段时间后可用的一种方式。当您向服务器提交某些内容并等待服务器响应时，它最有效。要使用进度条组件，请使用 npm 安装 react-native-paper 模块。安装 react-native-paper 的命令是：npm install --save-dev react-native-paper进度条的基本组件如下：要使用进度条，您需要从 react-native-paper 中导入它，如下所示：import { ProgressBar} from 'react-native-paper';以下是进度条上的一些重要属性：序号属性 & 说明1progress它接受 0 到 10 的值。…… 阅读更多

加载指示器用于当我们想要告诉用户他们在 UI 上发出的请求需要一些时间时。例如，用户填写表单后点击提交按钮，或点击搜索按钮以获取一些数据。React Native 提供了一个 ActivityIndicator 组件，它有不同的方法在 UI 上显示加载指示器。ActivityIndicator 组件的基本用法如下：要使用 ActivityIndicator，您需要导入它，如下所示：import { ActivityIndicator} from 'react-native';以下是 ActivityIndicator 的一些重要属性。序号属性 & 说明1animating用于动画加载指示器。它接受布尔值…… 阅读更多

在您的系统上安装 React Native 后，您应该在 App.js 中获得如下默认代码：import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default class App extends React.Component {    render() {       return (                       打开 App.js 开始您的应用程序！                您所做的更改将自动重新加载。                   摇动您的手机以打开开发者菜单。             ... 阅读更多

要从服务器加载数据，您可以使用 fetch API，它类似于 XMLHttpRequest 或任何其他网络 API。使用 fetch 向服务器发出请求非常容易。请看下面的代码：fetch('https://jsonplaceholder.typicode.com/posts/1')    .then((response) => response.json())    .then((responseJson) => console.log(responseJson));在上面的代码中，我们正在获取 JSON 文件 https://jsonplaceholder.typicode.com/posts/1 并将数据打印到控制台。对 fetch() API 的最简单调用接受一个参数，即您想要获取的路径，它返回一个带有响应的 promise。fetch api 返回一个带有 http 响应的 promise，…… 阅读更多

Alert 组件有助于向用户显示一个对话框，即一个弹出窗口，其中包含标题、消息和按钮，以便根据显示的消息了解用户的确认。Alert 的基本组件如下：Alert.alert('yourtile', 'yourmessage', [yourbuttons], ‘options’)要使用 Alert 组件，您需要导入它，如下所示：import { Alert } from 'react-native';要获得弹出窗口，您只需调用 Alert.alert() 函数即可。alert() 接受四个参数，分别是标题、消息、按钮和选项。标题是必填参数，其余是可选参数。这是一个简单的例子…… 阅读更多

在设备上，与UI的主要交互方式是触摸或点击。因此，当我们使用应用程序时，我们大多是点击按钮来执行某些操作，或者通过触摸屏幕来滚动页面，尝试缩放页面等。为了处理这些手势，例如点击、触摸，React Native 提供了可以捕获这些事件的事件或可触摸组件来处理触摸。让我们来看一个点击按钮时会发生什么的例子。示例 1：处理按钮点击这是一个简单的按钮示例。{       alert('你点击了我！');    }} ... 阅读更多