Question

我正在尝试在React Native中滚动另一个视图的视图。

render() {
    return (
        <View style={{
            flex: 1
        }}>


            //THIS IS A BACKGROUND VIEW
            <BackgroundView />

            //THIS IS THE FOREGROUND VIEW
            <View style={{
                borderWidth: 1,
            }}>
                <FlatList
                    data={cards}
                    refreshing={this.state.isRefreshing}
                    onRefresh={this.onRefresh}
                    renderItem={({ item, index }) => <Card {...item} />}
                    keyExtractor={(item, index) => index}
                    onEndReached={this.loadMore}
                    onEndReachedThreshold={2} />
            </View>
        </View>
    )

}

我想要前景视图，其中包含FlatList以滚动BackgroundView

我尝试在position:absolute上使用ForegroundView，但FlatList停止工作，我无法滚动。

编辑：最初显示BackgroundView（包含一些介绍内容），底部部分为ForegroundView，当用户在屏幕上滚动时，ForegroundView会滚动在它上面

Answer 1

这是有效的：

对于您的背景视图，请使用样式'... StyleSheet.absoluteFillObject'或：

{ position: ('absolute': 'absolute'),
  left: 0,
  right: 0,
  top: 0,
  bottom: 0,
}

根据您的设计，评论中注明，前景通常会填满整个视图，使背景无法与之交互。

我找到的唯一解决方案是将前景定位为绝对，并尽可能覆盖最小的表面。如果视图保持简单，它就可以工作。

此处示例显示屏幕底部的按钮容器，它不会与背景的顶部，左侧和右侧重叠：

bottomButtonContainer: {
  position: 'absolute',
  flex: 1,
  alignItems: 'center',
  bottom: 0,
  marginVertical: 5,
  marginHorizontal: '25%',
  width: '50%',
  backgroundColor: 'transparent',
  flexDirection: 'row',
  justifyContent: 'center',
},

如何在另一个视图上滚动视图？

1 个答案: