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

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

希望它会有所帮助

React-native水平滚动查看动画结束

1 个答案: