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

【问题标题】：TouchableWithoutFeedback breaks ScrollView. How to fix without putting view inside ScrollView?TouchableWithoutFeedback 会中断 ScrollView。如何在不将视图放入 ScrollView 的情况下进行修复？
【发布时间】：2019-08-30 01:36:52
【问题描述】：

我正在尝试将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。

【问题讨论】：

标签： ios reactjs react-native

【解决方案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>

应用预览

【讨论】：

感谢您的回复！我加粗部分问题使问题变得更加困难（它也在标题中）。再次感谢您的回复。