Androidの警告：「AIRMap」のネイティブコンポーネントは存在しません

Question

リアクションアプリにairbnbマップを追加しました。

しかし、私は既存のアンドロイドネイティブアプリケーションにairbnbマップビューを追加しています。私は赤いボーダーで常に空の地図を取得しています。

私はRN 0.40を使用しており、反応性ネイティブマップ0.13.0を使用しています。

リアクションネイティブリンクコマンド。その後、アンドロイドには常に警告が表示されます。 "AIRMap"のネイティブコンポーネントは存在しません。

appParams：{"initialProps"：{}、 "rootTag"：1}でアプリケーション "App"を実行しています。 DEV ===真、開発レベルの警告がONされ、パフォーマンスの最適化は、ここOFF

あり、MainApplication.javaは

package punchh.customreactcomponent; 

import android.app.Application; 

import com.airbnb.android.react.maps.MapsPackage; 
import com.facebook.react.ReactApplication; 
import com.facebook.react.ReactNativeHost; 
import com.facebook.react.ReactPackage; 
import com.facebook.react.shell.MainReactPackage; 
import com.facebook.soloader.SoLoader; 

import java.util.Arrays; 
import java.util.List; 

public class MainApplication extends Application implements ReactApplication { 

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { 
    @Override 
    protected boolean getUseDeveloperSupport() { 
     return BuildConfig.DEBUG; 
    } 

    @Override 
    protected List<ReactPackage> getPackages() { 
     return Arrays.<ReactPackage>asList(
       new MainReactPackage(), 
       new MapsPackage() 
    ); 
    } 
    }; 

    @Override 
    public ReactNativeHost getReactNativeHost() { 
    return mReactNativeHost; 
    } 

    @Override 
    public void onCreate() { 
    super.onCreate(); 
    SoLoader.init(this, false); 
    } 
} 

ファイル私はそのエラーを得ていた私の場合は、任意のソリューション

Answer 1

を提案して下さいアンドロイドシミュレーターでアプリを実行しようとすると、画面（と空白の画面）が表示されます。私は次のステップ適用して問題を修正：

1 - 実行 - react-native linkが、その後（反応-ネイティブ実行アンドロイド）

2をJSサーバ（react-native start）を再起動し、シミュレータ上でアプリを再デプロイ実行します実際のデバイスまたはGoogleApiシステムイメージに基づくシミュレータ上で実行されます。あなたはその後、googleApi not supported messageを取得アンドロイドスタジオでいくつかのパッケージを追加し、次のリンクで説明するように、新しいデバイスを作成する場合：

My application relies Google play services, which is not supported by your device. contact the manufacturer for assistance

私の仮想デバイスのための作業の構成：

3 - マニフェストファイル（android \ app \ src \ main \ AndroidManifest）にGoogle_API_KEYを追加する必要があります（作成する必要がない場合）。XML）：

<!-- make sure it's a child of application --> 
    <meta-data 
    android:name="com.google.android.geo.API_KEY" 
    android:value="Your Google maps API Key Here"/> 

• デバイスは、デバイス上に再デプロイjsの再起動サーバは、

• はすべてが働いているはずですが、私はのように私のgoogle_api_key（空黄色のマップ）の問題に直面して開始次の画像：

ので、私が作成し、0123ここに私のプロジェクトのために新しいものの特定を可能にhttps://developers.google.com/maps/documentation/android-api/signup#release-cert

• リスタートJSサーバは、react-native run-androidを実行し、それが働いた：

をデバッグするために、私は別の端末でadb logcatを使用しました。マップは、まだあなたには、いくつかのスタイリングが必要な場合があります表示されない場合 https://github.com/airbnb/react-native-maps/blob/master/docs/installation.md と https://github.com/airbnb/react-native-maps/issues/118

から：からインスピレーションを受け

。

import React from 'react' 
import MapView from 'react-native-maps'; 
import { 
    View, StyleSheet 
} from 'react-native' 

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

export default class MyMap extends React.Component { 
    render() { 
     const { region } = this.props; 

     return (
      <View style ={styles.container}> 
       <MapView 
        style={styles.map} 
        region={{ 
        latitude: 44.42, 
        longitude: 26.10, 
        latitudeDelta: 0.015, 
        longitudeDelta: 0.0121 
       }} 
       > 
       </MapView> 
      </View> 
     ); 
    } 
} 

Answer 2

私はMainApplication.javaファイル内getPackagesメソッドにMapsPackageを追加することによって、問題を修正しました：私はこのように私のコンポーネントに基本的なものを追加しました。マイコードはこのようになります

：

protected List<ReactPackage> getPackages() { 
     return Arrays.<ReactPackage>asList(
     new MapsPackage() 
    ); 
}