javascript - 切换到另一个选项卡时如何停止滚动滑动？

Question

环境:

"react": "16.9.0",
"react-native": "0.61.5",
"react-native-gesture-handler": "^1.5.2",
"react-native-reanimated": "^1.4.0",
"react-native-tab-view": "^2.11.0"

问题:

如何在切换到另一个标签时停止滚动滑动？

示例:

当我滚动内容并将手指从屏幕上移开时，内容继续滚动，即滑动。我需要当我切换到另一个选项卡时，此滚动幻灯片会立即停止。也就是说，该选项卡中的内容不会在后台滚动。

App.js

import * as React from 'react';
import {FlatList, Text, View, StyleSheet, Dimensions} from 'react-native';
import {TabView, SceneMap} from 'react-native-tab-view';

const DATA = Array.from(Array(1000).keys());

const renderFlatList = () => {
  const renderItem = ({item, index}) => {
    return <Text>{index}</Text>;
  };

  const keyExtractor = (item, index) => index.toString();

  return (
    <FlatList data={DATA} renderItem={renderItem} keyExtractor={keyExtractor} />
  );
};
const FirstRoute = () => (
  <View style={[styles.scene, {backgroundColor: '#ff4081'}]}>
    {renderFlatList()}
  </View>
);

const SecondRoute = () => (
  <View style={[styles.scene, {backgroundColor: '#673ab7'}]}>
    {renderFlatList()}
  </View>
);

export default class TabViewExample extends React.Component {
  state = {
    index: 0,
    routes: [{key: 'first', title: 'First'}, {key: 'second', title: 'Second'}],
  };

  render() {
    return (
      <View style={styles.container}>
        <TabView
          navigationState={this.state}
          renderScene={SceneMap({
            first: FirstRoute,
            second: SecondRoute,
          })}
          onIndexChange={index => this.setState({index})}
          initialLayout={{width: Dimensions.get('window').width}}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 36,
  },
  scene: {
    flex: 1,
  },
});

Answer 1

根据 OP @Sergey 的评论，使用了 React Navigation。可能是 react-native-tab-view 本身的问题。但是，React Navigation 底部选项卡会在不等待滚动完成的情况下进行交换。

https://snack.expo.dev/@trajano/scrolling-and-tab-switch在行动中展示了这一点。你可以做动量滚动(我减慢了减速速度)这样你就可以切换到下一个标签