Невозможно обновить состояния родительского класса из навигатора стека дочерних классов в React Native

Question

Родительский класс:

  import React, { Component } from 'react';
    import {
      View,
      Text,
      StatusBar
    } from 'react-native';
    
    import { NavigationContainer } from '@react-navigation/native';
    import { createStackNavigator } from '@react-navigation/stack';
    
    import LoginScreen from './AuthScreens/LoginScreen';
    import RegisterScreen from './AuthScreens/RegisterScreen';
    import HomeScreen from './HomeScreen/HomeScreen';
    import themeStyle from './themes/theme.style';
    
    
    const Stack = createStackNavigator();
    
    class App extends Component {
    
      constructor(props){
        super(props);
        this.toggleLoginState = this.toggleLoginState.bind(this);
        this.state = {
          isLogin:false
        }
      }
    
      toggleLoginState() {
        // this.setState({
        //   isLogin: true
        // });
        alert("toggling login status");
      }
    
      render(navigation) {
        if(this.state.isLogin){
          return(
            <HomeScreen />
          );
        }
        else {
          return(
            <NavigationContainer>
              <StatusBar barStyle="light-content" backgroundColor={themeStyle.PRIMARY_COLOR_DARK}/>
              <Stack.Navigator initialRouteName="Login"
                screenOptions={{
                  headerShown: false
                }}>
                <Stack.Screen name="Login" component={LoginScreen} toggleLoginState={this.toggleLoginState}/>
                <Stack.Screen name="Register" component={RegisterScreen} toggleLoginState={this.toggleLoginState}/>
              </Stack.Navigator>
            </NavigationContainer>
          );
        }
      }
    }
    
    module.exports = App;

дочерний класс:

import React, { Component, useState } from 'react';
import {
    Text,
    View,
    Image,
    StyleSheet,
    TextInput,
    TouchableOpacity
} from 'react-native';

import theme from '../themes/theme.style';

import Feather from 'react-native-vector-icons/Feather';

class LoginScreen extends Component {

    constructor(props){
        super(props);
        this.state = {
            isUserBoxFocused : false,
            isPassBoxFocused : false
        };
    }

    userBoxHandler = () => {
        if(isUserBoxFocused){
            this.setState({
                isUserBoxFocused : false
            });
        }
        else{
            this.setState({
                isUserBoxFocused : true
            });
        }
    }

    passBoxHandler = () => {
       if(isPassBoxFocused){
            this.setState({
                isPassBoxFocused : false
            });
       }
       else{
            this.setState({
                isPassBoxFocused : true
            });
       }
    }

    alertBox = () => {
        alert("login status toggling from login");
    }

    render(){
        return (
            <View style={styles.container}>
                <View
                    style={styles.header}
                >
                    <Image 
                        style={{width:200,height:200}}
                        source={require('../images/profile.png')}
                    />
                    <Text style={styles.welcome}>
                        Welcome!
                    </Text>
                    <Text style={styles.desc}>
                        Sign In to Continue
                    </Text>
                </View>
                <View style={styles.footer}>   
                    <View style={styles.inputBox}>
                        <View style={styles.row}>
                            <Feather name="user" size={20} 
                               color={this.state.isUserBoxFocused?theme.PRIMARY_COLOR_MED:theme.PRIMARY_COLOR_DARK}
                            />
                            <TextInput 
                                style={styles.input} 
                                placeholder={'username or email'}
                                onFocus={() => userBoxHandler()}
                                onBlur={() => userBoxHandler()}
                            />
                        </View>
                        <View style={{height:1,backgroundColor:'gray'}}/>
                        <View style={styles.row}>
                            <Feather 
                                name="lock" size={20} 
                                color={this.state.isPassBoxFocused?theme.PRIMARY_COLOR_MED:theme.PRIMARY_COLOR_DARK}
                            />
                            <TextInput 
                                style={styles.input} 
                                placeholder={'paasword'}
                                onFocus={() => passBoxHandler()}
                                onBlur={() => passBoxHandler()}
                            />
                        </View>
                    </View>
                    <TouchableOpacity style={styles.signInButton}
                        // onPress = {() => navigation.navigate('BaseScreen')}
                        onPress = {this.props.toggleLoginState}
                    >
                        <Text style={styles.signInText}>SIGN IN</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        onPress={() => {navigation.navigate("Register")}}
                    >
                        <Text style={styles.registerHere}>
                            Not a User? <Text style={{fontWeight:'bold'}}>Register here</Text>
                        </Text>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container :{
        height:'100%',
        flex:1,
        backgroundColor:'white',
    },
    header : {
        flex:1,
        justifyContent:'center',
        alignItems:'center',
        // backgroundColor:'red'
    },
    footer : {
        // backgroundColor:'blue',
        flex:1,
        justifyContent:'flex-end',
        paddingVertical:40,
        paddingHorizontal:40
    },
    welcome : {
        fontSize:50,
        fontWeight:'bold',
        marginBottom:10,
        color:theme.PRIMARY_COLOR_DARK
    },
    desc : {
        fontSize:18,
        color:theme.SECONDARY_COLOR_DARK
    },
    inputBox : {
        backgroundColor:theme.BACKGROUND_COLOR_LIGHT,
        borderColor:theme.PRIMARY_COLOR_DARK,
        borderWidth:1,
        borderRadius:10,
        marginBottom:30
        // padding:10
    },
    row : {
        flexDirection:'row',
        padding:10,
        alignItems:'center',
    },
    input : {
        padding:10,
        flex:1,
        // backgroundColor:'blue'
    },
    signInButton : {
        backgroundColor:theme.SECONDARY_COLOR_DARK,
        borderRadius:10,
        padding:15,
        alignItems:'center',
        marginBottom:25
    },
    signInText : {
        fontSize:25,
        fontWeight:'bold',
        color:'white'
    },
    registerHere : {
        fontSize:15,
        alignSelf:'center',
        marginBottom:20,
        color:theme.PRIMARY_COLOR_DARK
    }
});

module.exports = LoginScreen;

Я хочу создать поток входа в систему. когда пользователи входят в систему с экрана входа, он напрямую переключается на домашний экран. Для чего я пытаюсь использовать состояние в родительском классе как isLogin и хочу переключить это состояние из класса LoginActivity. Но при нажатии кнопки входа на экране входа в систему ничего не происходит. Я попытался передать toggleLoginState дочернему классу и контролировать состояние родительского класса.

Answer 1

Вы не можете напрямую передать событие дочернему компоненту из навигатора root. Согласно шаблону, который вы определили для родительского класса и навигатора root, вы должны использовать атрибут initialParams внутри Stack.Screen. Этот атрибут принимает объект, тогда вы должны передать свое событие как объект.

Затем измените код с

<Stack.Screen name="Login" component={LoginScreen} toggleLoginState={this.toggleLoginState}/>
<Stack.Screen name="Register" component={RegisterScreen} toggleLoginState={this.toggleLoginState}/>

на

<Stack.Screen name="Login" component={LoginScreen} initialParams={{toggleLoginState : this.toggleLoginState}}/>
<Stack.Screen name="Register" component={RegisterScreen} initialParams={{toggleLoginState : this.toggleLoginState}}/>

в дочернем компонент, событие, которое было привязано к параметрам, необходимо получить с помощью route.params дочернего элемента props и вызвать событие, используя свойство, которое использовалось в initialParams, чтобы установить событие для объекта.

loginEventHandler (){
   const {route} = this.props;
   route.params.toggleLoginState();
}

Затем вызовите это при срабатывании кнопки входа в систему.

<TouchableOpacity style={styles.signInButton} onPress = {this.loginEventHandler}>
     <Text style={styles.signInText}>SIGN IN</Text>
</TouchableOpacity>