反応のネイティブマップがアンドロイドのために読み込まれていない（空白の地図）

Question

私は長い間これに立ち往生していました。おそらくネイティブマップは、私が見つけたすべての答えとして、アンドロイドエミュレータでは動作しません。とにかくIOSのために働く。

私は現在、アンドロイドエミュレータを使用してアプリケーションを実行しています。単純なマップのコードは次のとおりです。

class MainMap extends Component { 
    constructor() { 
    super(); 
    } 
    render(){ 
     return (
      <View style={styles.container}> 
      <MapView 
    initialRegion={{ 
     latitude: 37.78825, 
     longitude: -122.4324, 
     latitudeDelta: 0.0922, 
     longitudeDelta: 0.0421, 
    }} 
    /> 
    </View> 
     ) 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    position: 'absolute', 
    top: 0, 
    left: 0, 
    right: 0, 
    bottom: 0, 
    justifyContent: 'flex-end', 
    alignItems: 'center', 
    }, 
    map: { 
    position: 'absolute', 
    top: 0, 
    width:150, 
    height:150, 
    left: 0, 
    right: 0, 
    bottom: 0, 
    }, 
}); 

module.exports = MainMap; 

コードは、私が例から直接取り上げたように、動作するはずです。私はreact-native run-androidを実行したときにアプリがエラーメッセージなしで、正常に動作しているようだ、でもGoogleのAPIからの私のAPIキーを持って、そして今私のAndroidManifest.xml

<meta-data 
     android:name="com.google.android.geo.API_KEY" 
     android:value="api here"/> 

に次を追加しました。しかし、このアプリは空白です。 Viewコンテナは正常にロードされますが、その内容はMapViewはまったく読み込まれません。私が見ているのは文字通り空白の画面です。

私のエミュレータにもGoogle PlayサービスとGoogle APIがインストールされています。

エラーメッセージが一切表示されないため、この問題をデバッグするにはどうすればよいですか？ react-native mapsでもアンドロイドエミュレータで動作できますか？

EDIT

私は今、長い間、この上で立ち往生してきた、そしてそれは私のこのプロジェクトに取り組むことができることから私を失速です。質問の本質は、デバッグが困難ですので、私は誰もが彼らの最後に、問題を再現し、私の問題が何であるかを見て喜んでいる場合には、私のリポジトリへのgithubのリンクを提供するつもりです...

https://github.com/Bolboa/TTC-Mapping

私が必要とするのは、マップをロードすることです。コードは正常に動作するはずですが、マップにはロードされません。

私は助けてくれる人に賞金を提供します。

Answer 1

MapViewにスタイルを指定してください。

はあなたが唯一のmapスタイルでstyles変数を作成しているが、あなたはのMapViewにそのスタイルを適用していないスタイル

container: { 
    flex: 1, 
    }, 
mapcontainer: { 
    flex: 1, 
    width: width, 
    height: height, 
    }, 

Answer 2

を含める方法をレンダリング

<View style={styles.container}> 
     <MapView style = {styles.mapcontainer} 
      showsUserLocation={true} 
      showsMyLocationButton={false} 
      zoomEnabled = {true} 
      region={this.state.region} > 
     </MapView> 
</View> 

で

var { width, height } = Dimensions.get('window') 

を含めます。 また、あなたは第二部が含まれるように逃したtroubleshootingセクションを見ているので、それが今では

<View style={styles.container}> 
    <MapView 
     style={styles.map} 
     initialRegion={{ 
      latitude: 37.78825, 
      longitude: -122.4324, 
      latitudeDelta: 0.0922, 
      longitudeDelta: 0.0421, 
     }}/> 
</View> 

のように見えるのMapView

style={styles.map} 

にスタイルを割り当てます次の行を追加する必要があります。
スタイルを追加した後でも、マップを表示できない場合は、キーに問題があります。