Environment:
"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"
Problem:
How to stop scrolling sliding when switching to another tab?
Example:
When I scroll the content and remove my finger from the screen, the content continues to scroll, that is, slide. I need that when I switch to another tab, this scroll slide stops instantly. That is, the content in that tab did not scroll in the background.
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,
},
});
