Tab 内的 react-native-maps 不起作用答案

【问题标题】：react-native-maps inside Tab not workingTab 内的 react-native-maps 不起作用
【发布时间】：2017-09-02 05:25:14
【问题描述】：

我在标签中显示我的<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>
    );
  }
}

【问题讨论】：

标签： react-native react-native-maps

【解决方案1】：

绝对是什么？如果地图在视图里面，视图组件还必须指定宽度和高度的绝对值。在您的情况下为tabContent。

【讨论】：

嘿，让tabContent flex: 1 不会使tabContent 视图的高度变为全高吗？我用屏幕截图更新了我的问题以更好地解释。我希望 MapView 适合 tabContent 组件
使用Dimensions.get('window').height 指定高度。这是正常的做法，你不喜欢什么？