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

Question

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

使用 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%"
}

});

Answer 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}
      />
    );
  }
}

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

希望对你有帮助