2017-01-18 2 views
5

반응 앱에 airbnb 맵을 추가했습니다.Android 경고 : "AIRMap"의 기본 구성 요소가 존재하지 않습니다.

하지만 기존 Android app에 airbnb 맵 뷰를 추가 할 때. 나는 항상 빨간 테두리가있는 빈지도를 얻고있다.

나는 RN 0.40을 사용하고 반응성 네이티브 -지도 0.13.0을 사용하고 있습니다.

대응 네이티브 링크 명령. 그럼 안드로이드는 항상 경고 : "AIRMap"의 기본 구성 요소가 존재하지 않습니다.

appParams : { "initialProps": {}, "rootTag": 1}을 사용하여 "App"응용 프로그램을 실행 중입니다. 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); 
    } 
} 

내가 그 오류가 발생 된 모든 솔루션 내 경우

+0

당신은 아마 당신의'Application.java'이 파일을 사용하여 게시물을 업데이트 할 수 있습니까? – martinarroyo

+0

@martinarroyo Application.java 파일을 게시했습니다. 이것을 확인할 수 있습니다. –

+0

@martinarroyo이 문제에 도움을 주실 수 있습니까 –

답변

2

을 제안하십시오 파일 DEV === 사실, 개발 단계의 경고가 ON되어, 성능 최적화는 OFF 여기

이다 (그리고 빈 화면) 안드로이드 시뮬레이터에서 애플 리케이션을 실행하려고 할 때. 나는 다음 단계 적용으로 문제를 해결 :

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

내 가상 장치에 대한 작업 구성 :

enter image description here

3 - Google_API_KEY를 추가하려면 매니페스트 파일 (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 (빈 노란색지도)에 문제를 직면 시작 다음 사진은 : enter image description here

은 그래서여기 내 프로젝트에 대한 새로운 하나의 특정을 생성 가능https://developers.google.com/maps/documentation/android-api/signup#release-cert

  • 재시작하는 JS 서버, react-native run-android를 실행하고 일했다 : enter image description here

내가 별도의 터미널에 adb logcat을 사용 디버깅하려면.

가에서 영감 : https://github.com/airbnb/react-native-maps/blob/master/docs/installation.mdhttps://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> 
     ); 
    } 
} 
0

내가 MainApplication.java 파일의 getPackages 방법에 MapsPackage를 추가하여 문제를 해결 :이처럼 내 구성 요소에 대한 기본 하나를 추가했습니다.

내 코드는 다음과 같습니다

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