Question

我正在创建一个应用，并希望创建一个用户身份验证页面。我遵循了react导航网站的身份验证流程页面上的教程，但是现在我每当尝试从登录屏幕导航到注册页面时，都会收到警告“无法从其他组件的函数体内更新组件” “。

这是我的App.js：

import React, { useState } from 'react';
import {
    FlatList,
} from 'react-native';
import { NavigationContainer, useNavigation } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import LoginScreen from "./Login";
import Home from "./Home";
import Signup from "./Signup";
import { AsyncStorage } from 'react-native'

export const COMPANY_NAME = "myCompany";

export const AuthContext = React.createContext();

const App: () => React$Node = () => {
    const [state, dispatch] = React.useReducer(
        (prevState, action) => {
            switch (action.type) {
                case 'RESTORE_TOKEN':
                    return {
                        ...prevState,
                        userToken: action.token,
                        isLoading: false,
                    };
                case 'SIGN_IN':
                    return {
                        ...prevState,
                        isSignout: false,
                        userToken: action.token,
                    };
                case 'SIGN_OUT':
                    return {
                        ...prevState,
                        isSignout: true,
                        userToken: null,
                    };
            }
        },
        {
            isLoading: true,
            isSignout: false,
            userToken: null,
        }
    );

    const authContext = React.useMemo(
        () => ({
            signIn: async data => {
                // In a production app, we need to send some data (usually username, password) to server and get a token
                // We will also need to handle errors if sign in failed
                // After getting token, we need to persist the token using `AsyncStorage`
                // In the example, we'll use a dummy token

                dispatch({ type: 'SIGN_IN', token: 'dummy-auth-token' });
            },
            signOut: () => dispatch({ type: 'SIGN_OUT' }),
            signUp: async data => {
                // In a production app, we need to send user data to server and get a token
                // We will also need to handle errors if sign up failed
                // After getting token, we need to persist the token using `AsyncStorage`
                // In the example, we'll use a dummy token

                dispatch({ type: 'SIGN_IN', token: 'dummy-auth-token' });
            },
        }),
        []
    );

    React.useEffect(() => {
        // Fetch the token from storage then navigate to our appropriate place
        const bootstrapAsync = async () => {
            let userToken;

            try {
                userToken = await AsyncStorage.getItem('userToken');
            } catch (e) {
                // Restoring token failed
            }

            // After restoring token, we may need to validate it in production apps

            // This will switch to the App screen or Auth screen and this loading
            // screen will be unmounted and thrown away.
            dispatch({ type: 'RESTORE_TOKEN', token: userToken });
        };

        bootstrapAsync();
    }, []);


    return (
        <NavigationContainer>
        <AuthContext.Provider value={{authContext}}>
        <RootStack state={state} authContext={authContext}/>
        </AuthContext.Provider>
        </NavigationContainer>
    );
};



function RootStack(props) {
    const Stack = createStackNavigator();


    return (

            <Stack.Navigator screenOptions={{ headerShown: false }}>
                {props.state.userToken == null ? (
                    <>
                        <Stack.Screen
                            name="Login"
                            component={LoginScreen}
                        />
                        <Stack.Screen
                            name="Signup"
                            component={Signup}
                        />
                    </>
                ) : (
                    <Stack.Screen
                        name="Home"
                        component={Home}
                    />
                )
                }
            </Stack.Navigator>

    );
}

这是我的Login.js：

import {StatusBar, Text, TextInput, TouchableOpacity, View, Button, TouchableHighlight} from "react-native";
import styles, {MAIN_COLOR} from "./Styles";
import React, {useState} from "react";
import { COMPANY_NAME, AuthContext } from "./App";
import { useNavigation } from '@react-navigation/native'
import TouchableItem from "@react-navigation/stack/src/views/TouchableItem";

export default function LoginScreen({ navigation }) {
    //Must be a child of AuthContext.Provider
    const [username, setUsername] = useState();
    const [password, setPassword] = useState();

    const { authContext } = React.useContext(AuthContext);
    console.log(AuthContext)


    return (
        <View style={styles.container}>
            <StatusBar
                backgroundColor={MAIN_COLOR}
            />
            <Text style={styles.welcome}>Welcome to {COMPANY_NAME}!</Text>
            <TextInput
                style={styles.input}
                placeholder='Username'
                onChange={(text) => setUsername(text)}
            />
            <TextInput
                style={styles.input}
                placeholder='Password'
                secureTextEntry
                onChange={(text) => setPassword(text)}
            />
            <View style={styles.btnContainer}>
                <TouchableOpacity style={styles.usrBtn}
                                  onPress={() => navigation.navigate('Signup')}>
                    <Text style={styles.btnText}>Sign Up</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.usrBtn}
                                  onPress={() => authContext.signIn({username, password})}>
                    <Text style={styles.btnText}>Login</Text>
                </TouchableOpacity>
            </View>
        </View>
    );
}

Answer 1

找到了答案。在我的Signup.js中，我有一个类似

的组件

<TouchableOpacity style={styles.usrBtn}
                                  onPress={navigation.navigate('Login')}>

需要更改为

<TouchableOpacity style={styles.usrBtn}
                                  onPress={() => navigation.navigate('Login')}>

Navigation.navigate在反应导航中不起作用

1 个答案: