taro RN 左右滑动切换页面

引入 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>
        <PagerView
          ref={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">
         
相关推荐
gnip13 分钟前
总结一期正则表达式
javascript·正则表达式
爱分享的程序员31 分钟前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘36 分钟前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出37 分钟前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的38 分钟前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解40 分钟前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵43 分钟前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端
南屿im44 分钟前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript
Spider_Man44 分钟前
从零开始构建React天气应用:API集成与UI设计全指南 🌤️
前端·react.js
浩浩测试一下1 小时前
渗透信息收集- Web应用漏洞与指纹信息收集以及情报收集
android·前端·安全·web安全·网络安全·安全架构