Question

我正在实现一个半透明的反应式视图，该视图在组件安装时覆盖了摄像机视口的底部三分之一。然后，如果用户愿意，用户可以选择将视图向上滚动，直到用户愿意时半透明视图可以覆盖整个摄像机视口。可以将其视为上下颠倒的百叶窗。我目前正在使用ScrollView来表示此UI，其合理性在于当用户与ScrollView进行交互时，可能会向其中添加更多项，因此用户可以向下滚动更多内容。代码在这里：

export default class Footer extends Component {

    renderItem = idx => 
        <View>
            <Text>
                hello world
            </Text>
        </View>


    render = () =>
        <View>
            <ScrollView
                horizontal                     = {false}
                keyboardShouldPersistTaps      = {'always'}
                showsHorizontalScrollIndicator = {false}
                scrollEventThrottle = {1} 
            >   
                {[0,1,2,3,4].map(item => {
                    return this.renderItem(item)
                })}
            </ScrollView>
        </View>

}

然后将此Footer放在Camera下方，如下所示：

render = () => 
    <View style={{ flex: 1 }}>
        <Camera 
            style = {{ flex: 1 }} 
            type  = {this.state.type}
            ref   = {this.setCameraRef} 
        >
            {this.renderCameraHeader()}
            <View style={camera.container}>
                <TouchableOpacity 
                    style = {camera.preview}
                    onPress={this.onTap}
                />
            </View>
            <Footer />
        </Camera>
    </View>

问题在于，现在正在加载时，scrollView处于可见状态，覆盖了整个视口，由于某种原因，我似乎无法向下滚动。给定react-native的UI组件，我描述的内容甚至可以表达吗？

反应本机视图在组件负载上滑动一半

0 个答案: