TouchableWithoutFeedback 中断 ScrollView.如何在不将视图放入 ScrollView 的情况下修复? [英] TouchableWithoutFeedback breaks ScrollView. How to fix without putting view inside ScrollView?
本文介绍了TouchableWithoutFeedback 中断 ScrollView.如何在不将视图放入 ScrollView 的情况下修复?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用 TouchableWithoutFeedback
包装的 ScrollView
工作.
在真正的问题中,我无法访问 ScrollView
.
I'm trying to get a TouchableWithoutFeedback
wrapped ScrollView
work.
In the real problem I'm unable to access the ScrollView
.
Here's a working Expo Snack for easy testing.
And here's the code.
import * as React from 'react';
import {
Text,
View,
StyleSheet,
ScrollView,
FlatList,
TouchableWithoutFeedback,
} from 'react-native';
import Constants from 'expo-constants';
import LongText from './components/LongText';
export default class App extends React.Component {
render() {
return (
<View style={{ flex: 1, paddingTop: Constants.statusBarHeight }}>
{/* https://stackoverflow.com/a/46606223/25197
BROKE on iOS
*/}
<TouchableWithoutFeedback onPress={() => console.log('Pressed 2')}>
<View style={[styles.container, { borderColor: 'red' }]}>
<Text style={styles.label}>
{'2) Touchable > View > View > ScrollView\n'}
{' - iOS: BROKE\n - Android: WORKING\n'}
</Text>
<View
style={{ flex: 1 }}
onStartShouldSetResponder={() => true}
// onStartShouldSetResponderCapture={() => true}
onResponderGrant={() => console.log('Granted View 2')}>
<ScrollView
style={{ flex: 1 }}
keyboardShouldPersistTaps={true}
onResponderGrant={() => console.log('Granted ScrollView 2')}>
<LongText />
</ScrollView>
</View>
</View>
</TouchableWithoutFeedback>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
borderWidth: 5,
flex: 1,
justifyContent: 'center',
backgroundColor: '#ecf0f1',
padding: 8,
},
label: { fontWeight: 'bold' },
});
The ScrollView
works as expected on Android.
How can I get it working on iOS?
In the real problem I'm unable to access the ScrollView
.
解决方案
Snack working link https://snack.expo.io/@mehran.khan/touchable-wrapped-scrollview
You should change this code
<View
style={{ flex: 1 }}
onStartShouldSetResponder={() => true}
// onStartShouldSetResponderCapture={() => true}
onResponderGrant={() => console.log('Granted View 2')}>
<ScrollView
Add onStartShouldSetResponder={() => true} to View instead of Scrollview
<ScrollView
style={{ flex: 1 }}>
<View onStartShouldSetResponder={() => true}><LongText /></View>
</ScrollView>
App Preview
这篇关于TouchableWithoutFeedback 中断 ScrollView.如何在不将视图放入 ScrollView 的情况下修复?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文