taro RN 左右滑动切换页面

news/2024/12/21 20:34:51/

引入  react-native-pager-view  组件

javascript">import React, { Component } from 'react'
import Taro from '@tarojs/taro'
import { View, PagerView, Button } from '@tarojs/components'
import PagerView from 'react-native-pager-view';export default class MyComponent extends Taro.Component {constructor(props) {super(props)this.pagerViewRef = React.createRef()this.state = {currentPage: 0,}}goToPage = (pageNumber) => {if (this.pagerViewRef.current) {this.pagerViewRef.current.setPage(pageNumber)this.setState({ currentPage: pageNumber })}}render() {return (<View><PagerViewref={this.pagerViewRef}initialPage={0}style={{ height: 200 }}onPageSelected={(e) => this.setState({ tabIndex: e.nativeEvent.position })}><View style={{ backgroundColor: 'red', flex: 1 }}>第一页</View><View style={{ backgroundColor: 'blue', flex: 1 }}>第二页</View><View style={{ backgroundColor: 'green', flex: 1 }}>第三页</View></PagerView><Button onClick={() => this.goToPage(1)}>Go to Page 1</Button></View>)}
}

react native

javascript">import * as React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import PagerView from 'react-native-pager-view';const Tabs = () => {const [page, setPage] = React.useState(0);return (<View style={styles.container}><View style={styles.tabBar}><TouchableOpacity onPress={() => setPage(0)}><Text>Tab 1</Text></TouchableOpacity><TouchableOpacity onPress={() => setPage(1)}><Text>Tab 2</Text></TouchableOpacity><TouchableOpacity onPress={() => setPage(2)}><Text>Tab 3</Text></TouchableOpacity></View><PagerView style={styles.pagerView} initialPage={page} onPageSelected={e => setPage(e.nativeEvent.position)}><View key="1">


http://www.ppmy.cn/news/1533599.html

相关文章

Linux下send函数和recv函数

1. 基本介绍 send 函数 send 函数用于向一个已连接的套接字发送数据。它的典型使用场景是在TCP通信中&#xff0c;客户端和服务器之间交换数据。 函数声明&#xff1a; ssize_t send(int sockfd, const void *buf, size_t len, int flags); 参数解释&#xff1a; sockfd&a…

【Java SE 题库】移除元素(暴力解法)--力扣

&#x1f525;博客主页&#x1f525;&#xff1a;【 坊钰_CSDN博客 】 欢迎各位点赞&#x1f44d;评论✍收藏⭐ 目录 1. 题目 2. 解法(快慢“指针”) 3. 源码 4. 小结 1. 题目 给你一个数组 nums 和一个值 val&#xff0c;你需要原地移除所有数值等于 val 的元素。元素的顺…

网络协议一般分为几类?如何划分

网络协议是计算机网络中用于通信的规则和标准&#xff0c;确保不同设备之间能够有效地传输数据。网络协议可以根据不同的标准和功能进行分类&#xff0c;主要分为以下几类&#xff1a; 一、按功能划分 应用层协议 应用层协议负责特定应用程序之间的通信&#xff0c;它们定义了…

(22)activeMQ部署

activeMQ集群部署: 前言:从ActiveMQ 5.9开始,ActiveMQ的集群实现方式取消了传统的Master-Slave方式, 增加了基于ZooKeeper + LevelDB的Master-Slave实现方式,其他两种方式目录共享和数据库共享依然存在。 25.213.39.177 25.213.39.97 25.213.39.86 主机 集群端…

通过python-api使用openai的gpt

目前&#xff0c;OpenAI 提供的 GPT 模型可以通过其提供的 API 进行访问。以下是如何通过 Python 使用 OpenAI GPT API 的详细步骤&#xff1a; 1. 安装 OpenAI Python 库 首先&#xff0c;你需要安装 OpenAI 的 Python 库。可以通过 pip 安装&#xff1a; pip install open…

开发微信小程序 案例01-本地生活首页页面

1---home.wxml 区域 &#xff08;页面整体的标签&#xff09; <!-- 轮播图区域 --> <swiper indicator-dots circular autoplay> <swiper-item wx:for"{{SwiperArr}}" wx:key"id"> <image src"{{item.image}}"></ima…

HTML【知识改变命运】03font 字体标签

题目&#xff1a;在页面上显示"北京"两个字&#xff0c;字体为微软雅黑&#xff0c;颜色为红色&#xff0c;大小为40xp&#xff1b; font标签可以修饰字体的大小&#xff0c;颜色&#xff0c;和字体 属性&#xff1a;color颜色&#xff0c;face字体&#xff0c;size大…

Python中流行的开源OCR项目

以下是一些Python中流行的开源OCR项目&#xff1a; PaddleOCR&#xff1a;由百度开发的OCR工具库&#xff0c;支持多种语言的文字识别&#xff0c;包括中英文&#xff0c;同时支持倾斜、竖排等多种方向的文字识别。它提供了超轻量级的PP-OCRv3模型&#xff0c;适合在资源受限的…