React-native 水平滚动视图动画到结束

Posted 2023-02-24

【中文标题】React-native 水平滚动视图动画到结束

【英文标题】：React-native Horizontal scroll View animate to end

【发布时间】：2018-05-04 22:14:15

【问题描述】：

我有水平滚动视图中的图像，我只希望在第一次滑动时所有图像滚动以平滑动画结束，以便用户可以通过一次滑动查看所有图像。

使用 prop scrollToEnd 对我没有帮助，因为它滚动得太快了。

这是我当前的代码。

   <ScrollView 
    contentContainerStyle=styles.container
    horizontal=true
    ref="scrollview"
    onScrollEndDrag=()=> this.refs.scrollview.scrollToEnd(animated: true)
    >
    <Image width=1800  source=require('./assets/1.png') />
    <Image width=1800  source=require('./assets/2.png') />
    <Image width=1800  source=require('./assets/3.png') />
    <Image width=1800  source=require('./assets/4.png') />
    <Image width=1800  source=require('./assets/5.png') />
    <Image width=1800  source=require('./assets/7.png') />
    <Image width=1800  source=require('./assets/8.png') />
    <Image width=1800  source=require('./assets/9.png') />
    <Image width=1800  source=require('./assets/10.png') />
  </ScrollView>


const styles = StyleSheet.create(
  container: 
    flexGrow:1,
    flexDirection: 'row',
,
cover: 
    flexGrow: 1,
    height: "90%"

);

【问题讨论】：

plus refs 在这里被定义了。 this.refs.scrollview.scrollToEnd(animated: false) >

【参考方案1】：

尝试使用FlatList 代替ScrollView 可以如下使用：

import React,  Component  from "react";
import  FlatList, Text from "react-native";

const data = [
  
    imageUrl: require('./assets/1.png'),
    title: "something"
  ,
  
    imageUrl: require('./assets/2.png'),
    title: "something two"
  

];

export default class App extends Component 
  constructor(props) 
    super(props);
    this.state = 
      data: data
    ;
  

  render() 
    return (
      <FlatList
        horizontal
        data=this.state.data
        renderItem=( item: rowData ) => 
          return (
         <Image width=1800  source=rowData.imageUrl />
          );
        
        keyExtractor=(item, index) => index
      />
    );
  

我没有测试代码，但我认为这应该可以工作，我需要稍作修改

希望对你有帮助

【讨论】：

这不是我的问题。我已经有一个水平滚动视图。想要慢慢动画结束。