Tab 内的 react-native-maps 不起作用
react-native-maps inside Tab not working
我无法在选项卡中显示我的 <MapView />
。我正在使用 react-native-scrollable-tab-view
即使在使用 ...StyleSheet.absoluteFillObject
后,<MapView />
也不会显示在地图中。只有放置固定高度才能显示地图。例如:height: 500
.
这是我的示例选项卡屏幕的样子。
styles = StyleSheet.create({
tabContent: {
flex: 1,
},
map: {
...StyleSheet.absoluteFillObject,
},
});
class HomeTemporary extends Component {
render() {
return (
<ScrollableTabView
renderTabBar={() => <ScrollableTabBar />}
>
<ScrollView tabLabel="List" style={styles.tabContent}>
<Text>Content Tab One</Text>
</ScrollView>
<ScrollView tabLabel="Map" style={styles.tabContent}>
<MapView
scrollEnabled
style={styles.map}
provider={MapView.PROVIDER_GOOGLE}
initialRegion={{
latitude: 25.2048493,
longitude: 55.2707828,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
}}
/>
</ScrollView>
</ScrollableTabView>
);
}
}
绝对关于什么?如果地图里面有视图,视图组件还必须指定宽度和高度的绝对值。在你的情况下 tabContent
.
我无法在选项卡中显示我的 <MapView />
。我正在使用 react-native-scrollable-tab-view
即使在使用 ...StyleSheet.absoluteFillObject
后,<MapView />
也不会显示在地图中。只有放置固定高度才能显示地图。例如:height: 500
.
这是我的示例选项卡屏幕的样子。
styles = StyleSheet.create({
tabContent: {
flex: 1,
},
map: {
...StyleSheet.absoluteFillObject,
},
});
class HomeTemporary extends Component {
render() {
return (
<ScrollableTabView
renderTabBar={() => <ScrollableTabBar />}
>
<ScrollView tabLabel="List" style={styles.tabContent}>
<Text>Content Tab One</Text>
</ScrollView>
<ScrollView tabLabel="Map" style={styles.tabContent}>
<MapView
scrollEnabled
style={styles.map}
provider={MapView.PROVIDER_GOOGLE}
initialRegion={{
latitude: 25.2048493,
longitude: 55.2707828,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
}}
/>
</ScrollView>
</ScrollableTabView>
);
}
}
绝对关于什么?如果地图里面有视图,视图组件还必须指定宽度和高度的绝对值。在你的情况下 tabContent
.