在开发应用过程中，我们希望能够在不同的屏幕之间切换，这由 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/ 的文件夹。创建两个 js 文件 HomePage.js 和 AboutPage.js。pages/HomePage.js import * as React from 'react'; import { Button, View, Alert, Text } from 'react-native'; const HomeScreen = ({ navigation }) ... 阅读更多

当你的列表规模非常庞大时，VirtualizedList 组件是最佳选择。VirtualizedList 有助于提高性能和内存利用率。当用户滚动时，数据才会显示给用户。VirtualizedList 的基本组件如下：重要的 VirtualizedList 属性属性描述renderItem从数据中渲染的项目将在 VirtualizedList 内渲染。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('您点击了我！');    }} ... 阅读更多