我有一个这样的视图
<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时,我想滚动所有表格。
谢谢
答案 0 :(得分:1)
如果知道列的宽度,则可以使用与基础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
上使用gestures捕获触摸,然后将它们映射到ScrollView
上的位置来缓解这种情况。
答案 1 :(得分:0)
我(认为)这是您要寻找的...本质上,您只能滚动最右边的列,而其余列则不可滚动。因此,您必须等待ScrollView的本机事件处理程序传播所有更改,然后才能呈现出其余4列正在滚动的事实。