时间戳

首页 > 解决方案 > React 原生滚动子栏目

javascript - React 原生滚动子栏目

问题描述

我有这样的看法

<View style={styles.columnView}>
  <View style={[styles.columnButtonItem, styles.columnC]}><Text></Text></View>
  <View style={[styles.columnButtonItem, styles.columnA]}><Text></Text></View>
  <View style={[styles.columnButtonItem, styles.columnB]}><Text></Text></View>
  <View style={[styles.columnButtonItem, styles.columnE]}><Text>{value}</Text></View>
  <View style={[styles.columnButtonItem, styles.columnAs]}><Text></Text></View>
  <View style={[styles.columnButtonItem, styles.columnT]}><Text></Text></View>
</View>

迭代后，我组成一个这样的表：

在此处输入图像描述

有没有办法在单列上添加 ScroolView？例如，我只想在 columnE 上启用滚动。显然，当我滚动 columnE 时，我想滚动所有表格。

谢谢

标签： javascriptreact-nativescrollview

解决方案

绝对定位视图

如果您知道列的宽度，那么您可以使用与底层重叠的绝对定位的视图ScrollView，它们将停止对ScrollView. 这意味着它只会在绝对定位视图未覆盖的部分上滚动。

所以你可以做这样的事情

render() {
  // set these widths to be the size before row E and the size after row E
  let leftWidth = '33%'; 
  let rightWidth = '33%';
  return (
    <View style={{flex: 1}}>
      <ScrollView style={{flex: 1}}>

        // items for the scroll view go here

      </ScrollView>
      <View style={{position:'absolute', top:0, left: 0, bottom: 0, width: leftWidth}} />
      <View style={{position:'absolute', top:0, right: 0, bottom: 0, width: rightWidth}} />
    </View>
  )
}

小吃

这是一个展示此实现的小吃。我backgroundColor在绝对定位视图上设置了一个，以便您可以清楚地看到它们。 https://snack.expo.io/@andypandy/partial-scrollview

警告

此解决方案的主要问题是您将无法触摸绝对定位视图下方的任何内容。您可以通过使用每个手势View捕获触摸然后将它们映射到ScrollView.

推荐阅读