反応 - ネイティブ+ネイティブベース。マップビューを塗りつぶす<Content>エリア

Question

私はreact-native + native-baseを使用しており、単純なレイアウト - ヘッダーのコンテンツフッターを使用しています。私はこのセクションでMapViewを使用しています。私はマップがコンテンツ領域を埋めるようにしたいと思います。 MapViewのスタイルで幅と高さを指定すると、マップが正常に表示されます。私が屈曲さのMapViewのスタイルを設定した場合：1マップはここに私のコードがある

まで表示されません地図コンテンツを埋めるために。私が望むすべてが..です

/** 
 
* 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);

Answer 1

ネイティブベースコンテナはスクロール可能なビューなので、このコンテナ内のマップを埋めることはできません。マップ要素を検査する場合、高さは0です。

可能な解決策の1つは、ウィンドウの寸法を検出し、コードの幅と高さを計算することです。ウィンドウ枠のサイズ変更や回転には注意してください。

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

Answer 2

<Content>の代わりに<View>であなたの<MapView>をラップしてみてください。

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