HarmonyOS RN三方组件react-native-pager-view setPageWithoutAnimation()方法带了动画

HarmonyOS
2024-12-25 09:59:56
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
superinsect

参考demo:

import React from 'react';
import PagerView from 'react-native-pager-view';
import { View, Text, Button } from 'react-native';

const PagerViewTest = () => {
  const pagerRef = React.useRef<PagerView>(null);
  const [index, setIndex] = React.useState(0);
  return (
    <PagerView
  style={{
    flex: 1,
    width: '100%',
    height: 200,
    margin: 10,
    backgroundColor: '#6D8585',
  }}
ref={pagerRef}
initialPage={0}
layoutDirection={'rtl'}
keyboardDismissMode={'on-drag'}
onPageSelected={(e: any) => {
}}>
<View
style={{
  alignItems: 'center',
  padding: 10,
  margin: 10,
  width: '80%',
  height: '80%',
  backgroundColor: '#E6713E',
}}
key="1">

  <Text
style={{
  width: '100%',
  height: 100,
  fontWeight: 'bold',
}}>
First page:({index})
  </Text>

  <Button title='点击跳转setPage' onPress={() => {
  console.warn("setPage");
  pagerRef.current?.setPage(1);
}} />

  </View>
  <View
style={{
  alignItems: 'center',
  padding: 10,
  margin: 10,
  width: '80%',
  height: '80%',
  backgroundColor: '#7A8CF2',
}}
key="2">
  <Text
style={{
  width: '100%',
  height: 100,
  fontWeight: 'bold',
}}>
Second page:({index})
  </Text>

  <Button title='点击跳转setPageWithoutAnimation' onPress={() => {
  console.warn("setPageWithoutAnimation");
  pagerRef.current?.setPageWithoutAnimation(2);
}} />
  </View>
  <View
style={{
  alignItems: 'center',
  padding: 10,
  margin: 10,
  width: '80%',
  height: '80%',
  backgroundColor: '#F28CE9',
}}
key="3">
  <Text
style={{
  width: '100%',
  height: '100%',
  fontWeight: 'bold',
}}>
Third page:({index})
  </Text>
  </View>
  </PagerView>
);
};

export default PagerViewTest;
分享
微博
QQ
微信
回复
2024-12-25 12:11:26
相关问题
HarmonyOS react-native-pager-view安装失败
303浏览 • 1回复 待解决
HarmonyOS react-native-pdf三方库问题
230浏览 • 1回复 待解决
react-native三方库使用npm更新
1599浏览 • 1回复 待解决
HarmonyOS rn三方库集成官网
725浏览 • 1回复 待解决
HarmonyOS RN三方库适配方案
71浏览 • 1回复 待解决