Android 警告:“AIRMap"的本机组件不存在 [英] Android Warning: Native component for "AIRMap" does not exist
问题描述
我已经在 react 应用中成功添加了 airbnb 地图.
但是当我将 airbnb 地图视图添加到现有的 Android 本机应用程序时.我总是得到带有红色边框的空地图.
我使用的是 RN 0.40 和 react-native-maps 0.13.0.
在 react-native link 命令之后.然后android总是有警告:AIRMap"的本机组件不存在.
使用 appParams 运行应用程序App":{"initialProps":{},"rootTag":1}.DEV === true，开发级警告开启，性能优化关闭
这里是 MainApplication.java 文件
包punchh.customreactcomponent;导入 android.app.Application;导入 com.airbnb.android.react.maps.MapsPackage;导入 com.facebook.react.ReactApplication;导入 com.facebook.react.ReactNativeHost;导入 com.facebook.react.ReactPackage;导入 com.facebook.react.shell.MainReactPackage;导入 com.facebook.soloader.SoLoader;导入 java.util.Arrays;导入 java.util.List;公共类 MainApplication 扩展应用程序实现 ReactApplication {私有最终 ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {@覆盖protected boolean getUseDeveloperSupport() {返回 BuildConfig.DEBUG;}@覆盖受保护列表获取包(){返回数组.asList(新的 MainReactPackage(),新地图包());}};@覆盖公共 ReactNativeHost getReactNativeHost() {返回 mReactNativeHost;}@覆盖公共无效 onCreate() {super.onCreate();SoLoader.init(this, false);}} 请提出任何解决方案
就我而言，我在尝试在 android 模拟器上运行应用程序时遇到了该错误(和一个空白屏幕).我解决了应用后续步骤的问题:
1 - 运行 react-native link 然后重新启动 js 服务器(react-native start)并在模拟器上重新部署应用程序(react-native run-android)
2 - 在真实设备或基于 GoogleApi 系统映像的模拟器上运行.如果您收到 googleApi not supported 消息，请在 android studio 中添加一些包并创建一个新设备，如下链接所述:
3 - 在清单文件 (android\app\src\main\AndroidManifest.xml) 中添加 Google_API_KEY(如果没有，则必须创建它)::>
<元数据android:name="com.google.android.geo.API_KEY"android:value="你的谷歌地图 API 密钥在这里"/>启动设备，重启js服务器，重新部署到设备上
一切正常，但我的 google_api_key(一张空的黄色地图)出现了问题，如下图所示:
所以我在这里为我的项目创建并启用了一个新的
为了调试，我在单独的终端中使用了 adb logcat.
灵感来自:https://github.com/airbnb/react-native-maps/blob/master/docs/installation.md并从https://github.com/airbnb/react-native-maps/issues/118
如果地图仍未显示，您可能需要一些样式.我向我的组件添加了一个基本的，如下所示:
从 'react' 导入 React从'react-native-maps' 导入 MapView；进口 {视图、样式表来自'反应原生'const 样式 = StyleSheet.create({容器: {...StyleSheet.absoluteFillObject,高度:400，宽度:400，justifyContent: 'flex-end',alignItems: '中心',},地图: {位置:'绝对'，顶部:0，左:0，右:0，底部:0，宽度:300，高度:300},});导出默认类 MyMap 扩展 React.Component {使成为() {const { region } = this.props;返回 (<查看样式={styles.container}><地图视图风格={styles.map}地区={{纬度:44.42，经度:26.10，纬度Delta:0.015，经度Delta:0.0121}}></地图视图></查看>);}}I have successfully added airbnb map in react app.
But when I am adding airbnb map view to existing android native application. I am getting always empty map with red border.
I am using RN 0.40 and react-native-maps 0.13.0.
after the react-native link commands. Then android always have the Warning: Native component for "AIRMap" does not exist.
Running application "App" with appParams: {"initialProps":{},"rootTag":1}. DEV === true, development-level warning are ON, performance optimizations are OFF
Here, MainApplication.java File
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);
}
}
Please suggest any solution
In my case I was getting that error (and a blank screen) when attempting to run an app on an android simulator. I fixed the issue with applying the next steps:
1 - Running react-native link then restarted the js server (react-native start) and redeployed the app on simulator (react-native run-android)
2 - Running on a real device or on a simulator based on GoogleApi system image. If you get a googleApi not supported message then add some packages in android studio and create a new device as described in next link:
The working configuration for my virtual device:
3 - Adding the Google_API_KEY (If you don't have one you'll have to create it) in manifest file (android\app\src\main\AndroidManifest.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"/>
Started the device, restarted js server, redeployed on device
Everything should have worked but I faced an issue with my google_api_key (an empty yellow map) like in the next picture:
so I created and enabled a new one specific for my project here https://developers.google.com/maps/documentation/android-api/signup#release-cert
- Restarted JS server, ran
react-native run-androidand it worked:
To debug I used adb logcat in a separate terminal.
Inspired from: https://github.com/airbnb/react-native-maps/blob/master/docs/installation.md and from https://github.com/airbnb/react-native-maps/issues/118
If the map still doesn't show you might need some styling. I added a basic one to my component like this:
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>
);
}
}
这篇关于Android 警告:“AIRMap"的本机组件不存在的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
