React本机可触摸正在禁用ScrollView

olmpazwi  于 2023-01-02  发布在  React
关注(0)|答案(7)|浏览(152)

我是新的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>

当这个编译和运行时,点击被检测到,但是滚动视图根本不滚动。我把上面的代码做得简短而简单,但是每个组件都有适当的样式,我可以看到一切都渲染得很好,长文本在滚动视图的底部被切断。请帮助。
谢谢大家!

gzszwxb4

gzszwxb41#

这就是我的工作:

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

onStartShouldSetResponder prop 停止触摸事件向TouchableWithoutFeedback元素传播。

0g0grzrc

0g0grzrc2#

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

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

bmp9r5qi3#

您可以在TouchableWithoutFeedback中使用scrollView或FlatList。虽然您不应该这样做,但有时您别无选择。仔细阅读以下问题和答案可以验证这一点。close react native modal by clicking on overlayhow to dismiss modal by tapping screen in react native
对于这个问题,你可以让它工作的唯一方法(至少我知道的),或者最简单的方法是在你的代码中的文本周围添加一个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是一个 Package 器,用于使视图对触摸做出正确响应,以便您可以自动设置视图组件的样式,然后将其一些特殊属性设置为您想要的任何内容,例如activeOpacity等。此外,您可以使用TouchableHighlight它工作,但它接收一个子元素,即您将所有组件包含在父元素中。

hfsqlsce

hfsqlsce4#

我用的是这种结构,它对我很有效:

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

ao218c7q5#

我发现,对于我的情况,其他例子不起作用,因为他们禁用了点击或滚动的能力。

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

我碰巧需要多个块,但是你可以在数据数组中为一段文本使用一个元素,这样可以触发press事件,也可以滚动文本。

fcwjkofz

fcwjkofz6#

尝试在TouchableWithoutFeedback组件中使用ScrollView组件可能会导致一些意外的行为,因为TouchableWithoutFeedback组件的设计目的是捕获用户手势并触发操作,而ScrollView组件的设计目的是允许用户滚动浏览内容。
除非有充分的理由,否则不要使用。所有响应按下的元素在触摸时都应该有视觉反馈。TouchableWithoutFeedback只支持一个子组件。如果希望有多个子组件,请将它们 Package 在一个视图中。重要的是,TouchableWithoutFeedback的工作方式是克隆其子对象并对其应用响应者 prop 。因此,任何中间组件都需要通过这些属性传递到底层ReactNative组件。

67up9zun

67up9zun7#

也就是说,您不能在TouchableWithoutFeedback内拥有滚动视图,因为react native的属性会禁用它,您可以将滚动视图置于TouchableWithoutFeedback选项卡之外,并在单击视图标记时添加您想要的其他内容。
如果TouchableWithoutFeedback不起作用,您也可以改用可触摸高亮显示。

相关问题