javascript - 构建后反应本机页面不起作用

Question

我对本机反应有疑问。该应用程序在构建之前完美运行，但是在我使用 expo 构建它之后，我无法进入谷歌地图。我有一个按钮，如果按下它，它应该是 Geocode 2 地址。我不确定地图或地理编码是否不起作用（但我认为地理编码），但它不会取代屏幕。在测试模式下，在 Metro 服务器上运行，一切正常。

import { View, StyleSheet } from 'react-native';
import { Input, Button, Text } from 'react-native-elements';
import Geocoder from 'react-native-geocoding';
import { dataBase } from '../Backend/FireBase'

let logged = false;
export const loggedIn = () => {
    logged = true;
};

let originCoords = null;
let destinationCoords = null;

const geoCode = async (originName, target, navigation) => {
    const GOOGLE_MAPS_APIKEY = '';
    Geocoder.init(GOOGLE_MAPS_APIKEY);

    var firstResult = await Geocoder.from(originName);
    var secondResult = await Geocoder.from(target);
    
    var origin = firstResult.results[0].geometry.location;
    var destination = secondResult.results[0].geometry.location;

    originCoords = {latitude:origin.lat, longitude:origin.lng};
    destinationCoords = {latitude:destination.lat, longitude:destination.lng, latitudeDelta:0, longitudeDelta:0};

    navigation.replace('Map', {origin:originCoords , target:destinationCoords, originName:originName, targetName:target});
    console.log(origin + target)
}

const MainScreen = ({navigation}) => {
    const [origin, setOrigin] = useState("");
    const [target, setTarget] = useState("");

    var orders = [];
    dataBase.collection("Orders").get().then((querySnapShot) => querySnapShot.forEach((doc) => {
        orders.push(doc.data());
    }));

    const navigateToMap = () => {
        geoCode(origin, target, navigation);
    }

    const navigateToStaff = () => {
        if(logged){
            navigation.navigate('Orders',{orders:orders});
        }
        else{
            navigation.replace('Login',{orders:orders});
        }
    }

    return (
        <View style={styles.container}>
            <Input label="Origin" value={origin} onChangeText={text => setOrigin(text)}></Input>
            <Input label="Dest"  value={target} onChangeText={text => setTarget(text)}></Input>
            <Button title="Estimate" buttonStyle = {styles.button} onPress={() => navigateToMap()}></Button>
            <Text style={styles.text} h3>Staff</Text>
            <Button title="Login" buttonStyle = {styles.button} onPress = {() => navigateToStaff()}></Button>
        </View>
    )
}

const styles = StyleSheet.create(
    {
        container:{
            flex:1,
            alignItems:'center',
            padding:10
        },

        button:{
            width:200,
            marginTop:10
        },

        text:{
           marginTop:250,
           color:'#000000', 
        }
    }
)

export default MainScreen

谢谢你的帮助！

标签： javascriptreactjsreact-nativegoogle-mapsgeocoding