在Button -React native下面显示一个模态

Question

我们可以在原生android中保留一个组件，就像在某个组件id的layout_below中一样。我们怎样才能做出反应？假设我有一个模态或警告框，我希望它在单击时显示在特定按钮的下方。我怎么能这样做？

请查看视频https://youtu.be/gIjIZlgpTyI。在这里，您将看到模态一直出现在中心。我想要的是，如果我滚动屏幕，按钮（文本中午12点到下午3点）向上移动，当点击按钮时，模态框应该出现在它下面。

在下面的代码中，我使用marginTop来处理不理想的模态组件样式。

constructor(props) {
    super(props);
    this.state = {
        modalVisible: false,
    };
}

setModalVisible(visible) {
    this.setState({modalVisible: visible});
}
render() {
    return (
        <View>
            <TouchableOpacity style={{flex: 1, flexDirection: 'row',}}
                              onPress={() => this.setModalVisible(!this.state.modalVisible)}>
                <Text style={[styles.timeTable, styles.orange]}>12 Noon to 3PM, 7PM to 1AM </Text>
                <Icon style={[styles.timeTable, styles.orange]} name='ios-arrow-down'/>
            </TouchableOpacity>
            <Modal
                animationType="fade"
                transparent={true}
                visible={this.state.modalVisible}
                onRequestClose={() => {
                    alert('Modal has been closed.');
                }}>
                <TouchableWithoutFeedback style={{backgroundColor: 'red'}}
                                          onPress={() => this.setModalVisible(!this.state.modalVisible)}>

                    <View style={{
                        flex: 1,
                        backgroundColor: 'rgba(52, 52, 52, 0.4)',
                        position: 'absolute',
                        top: 0,
                        right: 0,
                        left: 0,
                        bottom: 0
                    }}>
                        <View style={{
                            flex: 1,
                            flexDirection: 'column',
                            backgroundColor: '#fff',
                            justifyContent: 'center',
                            alignItems: 'center',
                            borderRadius: 2,
                            shadowRadius: 10,
                            marginTop: '77%',
                            // height: 200,
                            marginRight: 28,
                            marginLeft: 28
                        }}>
                            <View style={{flex: 1,marginTop: 25, marginLeft: 25,}}>
                                <Text style={{ fontWeight: 'bold',}}>Opening Hours</Text>
                            </View>
                        </View>
                    </View>
                </TouchableWithoutFeedback>
            </Modal>
        </View>
    )
};