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

You can have a scrollView or FlatList inside a TouchableWithoutFeedback. Tho you shouldn't but some times you have no other choice to go. Taking a good look at this questions and answer validates that. close react native modal by clicking on overlay, how to dismiss modal by tapping screen in react native.

For the Question, The only way you can make it work (atleast that i know of), or the simplest way is to add a TouchableOpacity around Text in your code like this,

 <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>

Note: TouchableOpacity is a wrapper for making Views respond properly to touches so automatically you can style it the way you would have styled your View Component then set some of its special props to whatever you want e.g activeOpacity etc. Moreso you can use TouchableHighlight it works, but it receives one child element i.e you enclose all your component inside a parent one.

Answer 4

我发现对于我的情况，其他示例不起作用，因为它们禁用了单击功能或滚动功能。我改用了：

<FlatList
      data={[{key: text1 }, { key: text2 } ...]}
      renderItem={({ item }) => (
        <TouchableWithoutFeedback onPress={this.onPressContent}>
          <Text style={styles.text}>{item.key}</Text>
        </TouchableWithoutFeedback>
      )}
 />

我碰巧需要多个块，但是您可以将数据数组中的单个元素用于一个文本。这样不仅可以触发新闻事件，还可以滚动文本。

Answer 5

我正在使用这种结构为我工作：

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

Answer 6

多数民众赞成写道，你不能在TouchableWithoutFeedback中有一个滚动视图，它反应原生的属性，它将禁用它，你可以改为在TouchableWithoutFeedback标签之外滚动视图，并在点击时添加你想要的其他内容在视图标记内。

如果TouchableWithoutFeedback不起作用，您也可以改用Touchable Highlights。

React Native Touchable正在禁用ScrollView

6 个答案: