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

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-native-tab-view本身的一个问题。但是，“响应导航”底部选项卡可以在不等待滚动完成的情况下切换。

https://snack.expo.dev/@trajano/scrolling-and-tab-switch在实际操作中显示了这一点。您可以做动量滚动(我减慢了减速速度)，这样您就可以切换到下一个选项卡了。