React Native Touchable正在禁用ScrollView

Question

我是React Native的新手,所以我可能会问一些非常明显的事情,但请帮忙.

我有一个可触摸的视图,所以整个区域响应攻丝.然后将ScrollView嵌套在视图中.整体结构是这样的:

<TouchableWithoutFeedback onPress={this.handlePress.bind(this)}>
    <View>
        <ScrollView>
            <Text>Hello, here is a very long text that needs scrolling.</Text>
        <ScrollView>
    </View>
</TouchableWithoutFeedback>

编译并运行时,会检测到点击,但滚动视图根本不会滚动.我使上面的代码简洁明了,但每个组件都有正确的样式,我可以看到所有渲染都很好,长文本在ScrollView的底部被截断.请帮忙.

谢谢!

Answer 1

I'm using this structure it's working for me:

<TouchableWithoutFeedback onPress={() => {}}>
    {other content}   
    <View onStartShouldSetResponder={() => true}>
        <ScrollView>
            {scrollable content}
        </ScrollView>
    </View>
</TouchableWithoutFeedback>

Answer 2

这对我有用:

<TouchableWithoutFeedback onPress={...}>
  <View>
    <ScrollView>
      <View onStartShouldSetResponder={() => true}>
        // Scrollable content
      </View>
    </ScrollView>
  </View>
</TouchableWithoutFeedback>

所述onStartShouldSetResponder支柱停止朝向所述触摸事件传播TouchableWithoutFeedback元件.

Answer 3

您可以在 TouchableWithoutFeedback 中使用 scrollView 或 FlatList。你不应该，但有时你别无选择。仔细看看这些问题和答案可以验证这一点。 通过单击覆盖关闭本机模态， 如何通过在本机反应中点击屏幕来关闭模态。

对于这个问题，你可以让它工作的唯一方法（至少我知道），或者最简单的方法是在你的代码中像这样在 Text 周围添加一个 TouchableOpacity，

 <TouchableWithoutFeedback onPress={this.handlePress.bind(this)}>
    <View>
        <ScrollView>
          <TouchableOpacity>
            <Text>Hello, here is a very long text that needs scrolling.</Text>
          </TouchableOpacity>
        <ScrollView>
    </View>
</TouchableWithoutFeedback>

注意：TouchableOpacity 是一个包装器，用于使视图正确响应触摸，因此您可以按照您设置视图组件样式的方式对其进行样式设置，然后将其一些特殊道具设置为您想要的任何内容，例如 activeOpacity 等。此外，您可以使用 TouchableHighlight 它工作，但它接收一个子元素，即您将所有组件都包含在一个父元素中。

Answer 4

我正在使用这个结构，它对我有用：

<TouchableOpacity>
{other content}  
<ScrollView> 
     <TouchableOpacity activeOpacity={1}>
        {scrollable content}
     </TouchableOpacity>
</ScrollView>

Answer 5

也就是说，您不能在 TouchableWithoutFeedback 内拥有滚动视图，它是 React Native 的属性，它将禁用它，您可以将滚动视图放在 TouchableWithoutFeedback 选项卡之外，并在视图内单击时添加您想要的其他内容标签。

如果 TouchableWithoutFeedback 不起作用，您也可以使用 Touchable 高亮显示。