एंड्रॉइड चेतावनी: "एयरमैप" के लिए मूल घटक मौजूद नहीं है

Question

मैंने प्रतिक्रिया ऐप में एयरबैन मानचित्र सफलतापूर्वक जोड़ा है।

लेकिन जब मैं मौजूदा एंड्रॉइड देशी एप्लिकेशन में airbnb मानचित्र दृश्य जोड़ रहा हूं। मुझे लाल सीमा के साथ हमेशा खाली नक्शा मिल रहा है।

मैं आरएन 0.40 और प्रतिक्रिया-देशी-मानचित्र 0.13.0 का उपयोग कर रहा हूं।

प्रतिक्रिया-मूल लिंक आदेशों के बाद। फिर एंड्रॉइड में हमेशा चेतावनी होती है: "एयरमैप" के लिए मूल घटक मौजूद नहीं है।

ऐपपैम्स के साथ एप्लिकेशन "ऐप" चला रहा है: {"प्रारंभिकप्रॉप": {}, "रूटटाग": 1}। देव === सच है, विकास स्तरीय चेतावनी पर कर रहे हैं, प्रदर्शन अनुकूलन बंद

यहाँ, हैं 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 तो js सर्वर (react-native start) को पुनः आरंभ और (प्रतिक्रिया देशी रन एंड्रॉयड)

2 सिम्युलेटर पर एप्लिकेशन पुन: वितरित - चल रहा है GoogleApi सिस्टम छवि पर आधारित वास्तविक डिवाइस या सिम्युलेटर पर। आप तो एक googleApi not supported message मिल एंड्रॉयड स्टूडियो में कुछ संकुल जोड़ सकते हैं और अगले लिंक में वर्णित के रूप में एक नई डिवाइस बनाते हैं:

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

मेरी वर्चुअल डिवाइस के लिए काम विन्यास:

3 - प्रकट फ़ाइल में (_roid_ 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 (एक खाली पीला नक्शा) में की तरह के साथ एक समस्या का सामना करना पड़ा अगली फिल्म:

इसलिए मैं यहाँ अपने प्रोजेक्ट के लिए बनाया गया है और एक नया एक विशिष्ट सक्षम https://developers.google.com/maps/documentation/android-api/signup#release-cert

• को पुन: प्रारंभ जे एस सर्वर, 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() 
    ); 
}