React-native ScrollView прокручивает иногда в неправильном направлении - PullRequest
Новая
       24

React-native ScrollView прокручивает иногда в неправильном направлении

0 голосов
/ 08 января 2019

Странная проблема с реактивно-родным ScrollView / Flatlist. Когда я прокручиваю вниз или вверх, прокрутка контента иногда противоположна. Это в основном, когда я прокручиваю одной рукой. Я записал на YouTube видео этой проблемы.

Я также безуспешно пытался использовать класс ScrollView для реагирующих на жесты обработчиков. Это обычное поведение?

ссылка на YouTube (визуализация проблемы)

телефон используется: Huawei p20

Чтобы восстановить, используйте следующее 

react-native init TestProject
paste code below in App.js
react-native run-android (on real device) 
scroll with one hand

Вставьте этот код в App.js, чтобы устранить эту проблему. 

import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  Dimensions,
  Text,
  View,
  ScrollView,
  Animated,
} from "react-native";


const instructions = Platform.select({
  ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
  android:
    "Double tap R on your keyboard to reload,\n" +
    "Shake or press menu button for dev menu"
});

type Props = {};
export default class App extends Component<Props> {
  state = {
    scrollY: new Animated.Value(0)
  };

  render() {
    let { scrollY } = this.state;

    return (
      <View style={{ flex: 1, backgroundColor: "#fff" }}>
        <ScrollView
          style={{
            paddingHorizontal: 20,
            width: "100%",
            height: "90%",
            paddingBottom: "5%"
          }}
          bounces={false}
          showsVerticalScrollIndicator={true}
        >
          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>

          <View style={styles.row}>
            <Text> Test </Text>
          </View>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  row: {
    margin: 2,
    height: 40,
    width: Dimensions.get("window").width - 10,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#e5e5e5"
  },
  container: {
    //  marginTop: 50,
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  contentContainer: {
    paddingVertical: 0
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10
  },
  instructions: {
    textAlign: "center",
    color: "#333333",
    marginBottom: 5
  }
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...