如何在React Native中向下滑动视图

Question

嗨，我是新来的本地人  我的屏幕上有mapview和FlatList，如下图所示。

现在，我希望单击Mapview时将其展开，如下面的图片

这是我的代码

import React, { Component } from 'react';
import MapView, { PROVIDER_GOOGLE, Marker } from 'react-native-maps';
import { View, StyleSheet, Text, TouchableOpacity, Animated, Image } from 'react-native';
import { Actions } from 'react-native-router-flux';
import DoctorsList from './DoctorsList';
import colors from '../styles/colors';

var isHidden = true;
export default class FindDoctorMaps extends Component {
    constructor(props) {
        super(props);
        this.state = {
            bounceValue: new Animated.Value(500),  //This is the initial position of the subview
            buttonText: 'LIST VIEW',
            printText: false,
            markers: [{
                title: 'hello',
                coordinates: {
                    latitude: 17.452,
                    longitude: 78.3721
                },
            },
            {
                title: 'hi',
                coordinates: {
                    latitude: 17.458,
                    longitude: 78.3731
                },
            },
            {
                title: 'gyp',
                coordinates: {
                    latitude: 17.468,
                    longitude: 78.3631
                },
            },
            {
                title: 'nig',
                coordinates: {
                    latitude: 17.568,
                    longitude: 78.3831
                },
            },
            {
                title: 'Yoy',
                coordinates: {
                    latitude: 17.588,
                    longitude: 78.4831
                },
            }]
        };
    }

    render() {
        return (
            <View style={{ flex: 1, backgroundColor: 'white' }} >

                <MapView
                    provider={PROVIDER_GOOGLE}
                    region={{
                        latitude: 17.452,
                        longitude: 78.3721,
                        latitudeDelta: 0.015,
                        longitudeDelta: 0.0121,
                    }}
                    style={styles.map}
                    showsUserLocation
                    followUserLocation
                    showsMyLocationButton
                    showsCompass
                    zoomEnabled

                >

                    {this.state.markers.map(marker => (
                        <MapView.Marker
                            coordinate={marker.coordinates}
                            title={marker.title}
                            onPress={this.onMarkerPress}
                        />
                    ))}
                </MapView>

                <TouchableOpacity style={styles.filterContainer} onPress={Actions.morefilters}>
                    <View style={styles.filterStyle}>
                        <Image style={{ margin: 5 }} source={require('../assets/filters_icon.png')} />
                        <Text style={{ fontSize: 14, color: colors.darkBlue, fontWeight: 'bold', }}> Filters</Text>
                    </View>
                </TouchableOpacity>

                <View>
                    <TouchableOpacity >
                        <DoctorsList />
                    </TouchableOpacity>
                </View>

            </View>
        );
    }
}
const styles = StyleSheet.create({
    map: {
        height: 200,
    },
    textViewStyle: {
        fontSize: 14,
        color: '#00539d',
        fontWeight: 'bold',
        margin: 20
    },
    subView: {
        position: 'absolute',
        bottom: 0,
        left: 0,
        right: 0,
        backgroundColor: '#FFFFFF',
        height: 500,
    },
    filterContainer: {
        top: '20%',
        right: 0,
        alignSelf: 'flex-end',
        position: 'absolute'
    },
    filterStyle: {
        flexDirection: 'row',
        backgroundColor: colors.white,
        borderRadius: 8,
        height: 30,
        width: '60%',
        alignItems: 'center',
        justifyContent: 'center'
    }
});

任何人都可以帮助我如何通过单击来扩展Mapview。

否则，请分享一些有用的链接，以便我对我有帮助

Answer 1

this.state = {
    ....
    showMapFullScreen: false
    ....
}

render() {
    ....
    <MapView
        ....      
        style={height: showMapFullScreen ? "100%" : 200 }
        onPress={() => this.setState({ showMapFullScreen : true }) }
        ....
    >
    ....
    <TouchableOpacity 
         onPress={() => this.setState({ showMapFullScreen : false }) }>
         <DoctorsList />
    </TouchableOpacity>
    .......
}

您可以使用上面显示的标志来切换地图高度。当用户单击地图时，当他/她单击列表时，高度会变为全屏，地图的高度会减小，并为列表留出空间以进行渲染。