React-Native导航和Promise拒绝

Question

我已经分解成一个我无法解决的简单示例。 下面的代码似乎工作正常，我将导航添加到检查 function 中，如下所示。

然后失败并显示“可能未处理的 Promise 拒绝 (id: 0)”

应用程序.js

import React from 'react';
import { Text, View, Button, } from 'react-native';
import { NavigationContainer, useNavigation } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import { HomeScreen, NewScreen } from './ui/screens.js';

import { apiCall } from './api/server.js';

const Stack = createStackNavigator();

const App = () => {
    const check = async () => {
        const navigation = useNavigation(); <--------- Added, then failure

        try {
            const response = await apiCall();
            console.log(response);
            navigation.navigate("NewScreen"); <------- Added, then failure
        }
        catch(err) {
            console.log("Caught: " + err);
        }
    };

    return (
        <NavigationContainer>{
            <Stack.Navigator>
                <Stack.Screen name="Home">
                    {(props) => (
                        <HomeScreen {...props} check={check} />
                    )}
                </Stack.Screen>
                <Stack.Screen name="New"
                    component={NewScreen}
                />
            </Stack.Navigator>
        }</NavigationContainer>
    );
}

export default App;

服务器.js

import base64 from 'react-native-base64';
import * as global from './defs.js';

export const apiCall = async () => {

    try {
        const response = await fetch(global.SITE + "/ttt.php", {
            method: 'POST',
            headers: {
                'Content-type': 'application/x-www-form-urlencoded; charset=UTF-8',
                'Authorization': 'Basic ' + base64.encode(global.BASICAUTHUSER + ':' + global.BASICAUTHPWD)
            }
        });

        console.log(response);

        if (!response.ok) {
            return new Promise((resolve, reject) => {
                reject(new Error(httpError(response.status)));
            });
        }

        return response.json();
    }

    catch(err) {
        return err;
    };
};

屏幕.js

import React from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';

export function HomeScreen({ check, navigation }) {
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Button title="Next" onPress={check} />
        </View>
    );
}

export function NewScreen() {
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>Activation Screen.</Text>
        </View>
    );
}

任何帮助感激不尽。

Answer 1

您正在尝试使用 useNavigation() 挂钩，但您的组件不在<NavigationContainer>内。
我建议您在 HomeScreen 中使用导航/apiCall function，您可以从那里轻松导航。

更多参考useNavigation Hook