React 本机包 @homee/react-native-mapbox-navigation 未显示地图 (ANDROID)

Question

我正在尝试在 React Native 中实现轮流导航，我使用了包“@homee/react-native-mapbox-navigation”。我已使用这些说明 (https://reactnativeexample.com/smart-mapbox-turn-by-turn-routing-based-on-real-time-traffic-for-react-native/) 设置所有 gradle.properties / gradle.build 和清单设置。这就是我的 app.js 的样子：

import React from 'react';
import type {Node} from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

import MapboxNavigation from '@homee/react-native-mapbox-navigation';




const App: () => Node = () => {
  // const isDarkMode = useColorScheme() === 'dark';

  // const backgroundStyle = {
  //   backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  // };

  return (

    <View style={styles.container}>
            <MapboxNavigation
              origin={[-97.760288, 30.273566]}
              destination={[-97.918842, 30.494466]}
              shouldSimulateRoute={true}
              onLocationChange={(event) => {
                const { latitude, longitude } = event.nativeEvent;
              }}
              onRouteProgressChange={(event) => {
                const {
                  distanceTraveled,
                  durationRemaining,
                  fractionTraveled,
                  distanceRemaining,
                } = event.nativeEvent;
              }}
              onError={(event) => {
                const { message } = event.nativeEvent;
                console.log('error', event)
              }}
              onCancelNavigation={() => {
                // User tapped the "X" cancel button in the nav UI
                // or canceled via the OS system tray on android.
                // Do whatever you need to here.
              }}
              onArrive={() => {
                // Called when you arrive at the destination.
              }}
            />
      
    </View>

  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },

});

export default App;

这是我的模拟器显示的内容：

有人知道我为什么会出现空白屏幕以及如何解决这个问题吗？

谢谢大家！

Answer 1

代码工作正常错误是我把元数据标签放在错误的部分的 androidManifest.xml。我修复了这个并且它起作用了

React 本机包 @homee/react-native-mapbox-navigation 未显示地图 (ANDROID)

React native package @homee/react-native-mapbox-navigation not showing map (ANDROID)

react-native

react-native-android

turn-by-turn