react-native + native-base。請填寫MapView類區域<Content>

我使用的反應本地+本土基地和正在使用一個簡單的佈局 - 頁眉內容腳註。我在該部分中使用MapView，我希望地圖填充內容區域。如果我在MapView的樣式中指定寬度和高度，則地圖顯示正常。如果我設置的樣式的MapView的彎曲：1的地圖顯示不出來react-native + native-base。請填寫MapView類區域<Content>

這裏是我的代碼。所有我想要的是地圖，以填補內容..

/** 
 
* Sample React Native App 
 
* https://github.com/facebook/react-native 
 
* @flow 
 
*/ 
 

 
import React, { Component } from 'react'; 
 
import { 
 
    AppRegistry, 
 
    StyleSheet, 
 
    Text, 
 
    View, 
 
    MapView 
 
} from 'react-native'; 
 
import { Container, Header, Title, Content, Footer, FooterTab, Button, Icon } from 'native-base'; 
 

 
class Project extends Component { 
 
    render() { 
 
    return (
 
      <Container> 
 
       <Header> 
 
        <Title>TEST</Title> 
 
       </Header> 
 

 
       <Content> 
 
        <MapView 
 
         style={styles.map} 
 
         showsUserLocation={true} 
 
        /> 
 
       </Content> 
 

 
       <Footer> 
 
        <FooterTab> 
 
         <Button transparent> 
 
          <Icon name='ios-call' /> 
 
         </Button> 
 
        </FooterTab> 
 
       </Footer> 
 
      </Container> 
 
     ); 
 
    } 
 
} 
 

 
const styles = StyleSheet.create({ 
 
    container: { 
 
    flex: 1, 
 
    justifyContent: 'center', 
 
    alignItems: 'center', 
 
    backgroundColor: '#F5FCFF', 
 
    }, 
 
    welcome: { 
 
    fontSize: 20, 
 
    textAlign: 'center', 
 
    margin: 10, 
 
    }, 
 
    instructions: { 
 
    textAlign: 'center', 
 
    color: '#333333', 
 
    marginBottom: 5, 
 
    }, 
 
    map:{ 
 
    flex:1 
 
    } 
 
}); 
 

 
AppRegistry.registerComponent('Project',() => Project);

來源

2016-10-20 G-Man

NativeBase會盡快給你一個解決方案。 –

你找到答案了嗎？同樣的問題在這裏，並在Android 4.4，genymotion真正的設備，標題不會出現 –

不，我沒有找到答案 –

天然鹼基Container是一個滾動的看法，所以你可以不填此容器中的地圖。如果你查看地圖的元素，高度爲0

一個可能的解決方案是檢測窗口尺寸，然後計算在你的代碼的寬度和高度。但要小心窗框大小或旋轉。

import Dimensions from 'Dimensions'; Dimensions.get('window').height; Dimensions.get('window').width;

來源

2016-11-09 12:17:56

儘量包裹你的<MapView>在<View>，而不是<Content>：

<View style={{flex: 1}}> 
<MapView 
    style={styles.map} 
    showsUserLocation={true}/> 
</View>

來源

2016-11-10 09:19:31

它的工作原理，謝謝。 –

react-native + native-base。請填寫MapView類區域<Content>

回答

相關問題