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

Question

我正在尝试将TouchableWithoutFeedback包装为ScrollView的作品。

在实际问题中，我无法访问ScrollView。

Here's a working 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。

Answer 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}添加到视图而不是 Scrollview

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

应用预览