React-native Горизонтальная прокрутка Просмотр анимации до конца - PullRequest
0 голосов
/ 05 мая 2018

У меня есть изображения в горизонтальной прокрутке, я просто хочу, чтобы при первом пролистывании все изображения прокручивались до конца с плавной анимацией, чтобы пользователь мог видеть их все одним движением.

Использование 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%"
}

});

1 Ответ

0 голосов
/ 05 мая 2018

Попробуйте использовать 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}
      />
    );
  }
}

Я не тестировал код, но думаю, что это должно сработать, мне могут потребоваться небольшие изменения

Надеюсь, это поможет

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...