嗨,我是新来的本地人 我的屏幕上有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。
否则,请分享一些有用的链接,以便我对我有帮助
答案 0 :(得分: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>
.......
}
您可以使用上面显示的标志来切换地图高度。当用户单击地图时,当他/她单击列表时,高度会变为全屏,地图的高度会减小,并为列表留出空间以进行渲染。