2

环境：

"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"

问题：

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

例子：

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

在此处输入图像描述

应用程序.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,
  },
});
4

0 回答 0