TouchableWithoutFeedback 中断 ScrollView。如何在不将视图放入 ScrollView 的情况下修复?

IT技术 ios reactjs react-native
2021-04-28 22:46:33

我正在尝试TouchableWithoutFeedback打包ScrollView工作。

在真正的问题中,我无法访问ScrollView.

这是一个有效的 Expo Snack以便于测试。

这是代码。

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' },
});

ScrollView工程预期在Android上。

我怎样才能让它在 iOS 上运行?

在真正的问题中,我无法访问ScrollView.

1个回答

小吃工作链接https://snack.expo.io/@mehran.khan/touchable-wrapped-scrollview

您应该更改此代码

 <View
              style={{ flex: 1 }}
              onStartShouldSetResponder={() => true}
              // onStartShouldSetResponderCapture={() => true}
              onResponderGrant={() => console.log('Granted View 2')}>
              <ScrollView

将 onStartShouldSetResponder={() => true} 添加到View而不是Scrollview

<ScrollView
                style={{ flex: 1 }}>
                <View  onStartShouldSetResponder={() => true}><LongText /></View>
              </ScrollView>

应用预览

在此处输入图片说明