Ошибка при использовании StackNavigator с переключением экранов

Question

Я пытаюсь сделать экран регистрации / входа с помощью stackNavigator. Но когда я пытаюсь перейти со страницы входа на страницу регистрации.

Я пытался создать const, который был бы свойством навигации, но я получил то же самое. Если я делаю все свои экраны в одном файле с помощью stackNavigator, я не получаю ошибку, но это не совсем то, что я хочу сделать.

Сначала это мой Экран входа в систему (перед тем, как перейти к этому экрану в index.js, я вызываю класс Welcome, чтобы проверить, не вошли ли пользователи, и возвращаю, если он не

export default class Login extends React.Component{
    render(){

        return( 
          <ScrollView style={{padding : 20}}>
            <Text style={styles.title}>
              Login
            </Text>
            <TextInput style={styles.input} placeholder="Email Address"/>
            <TextInput style={styles.input} placeholder="Password" />
            <View style={{margin : 7}}/>
            <TouchableOpacity
            onPress={() => this.props.navigation.navigate('Signup')}
            >
              <Text> Don't have an account? Click here</Text>
            </TouchableOpacity>
            <Button
              onPress={this.props.onLoginPress}
              title="Log in"
              color='grey'
              />
          </ScrollView>   
        );
    }
}

Мой экран регистрации довольно пустой, он возвращает только вид с заголовком на данный момент И, наконец, вот мой файл StackNavigator

const AppNavigator = createStackNavigator({
  Welcome: {
      screen : Welcome
  } , 
  Login: {
    screen: Login
  },
  Signup : {
      screen : Signup
  },

},
{
    initialRouteName: "Welcome"
});

export default createAppContainer(AppNavigator);

Где Welcome - это файл, который проверяется, если пользователь вошел в систему, не

Ошибка, которую я получаю: «ошибка не определена, это не объект (оценивается как _this.props.navigation.navigate ')». Когда я нажимаю в Login.js

Answer 1

проверил репо. Ваш экран welcome сначала проверяет, вошел ли пользователь в систему или нет, и если он не вошел, он отображает экран login. Вы не перемещаетесь с Welcome экрана на Login экран, но отображаете другой экран входа в систему. Проблема лежит здесь. Я приведу пример:

В вашем телефоне, скажем, iPhone X, вы загрузили и установили Facebook из App Store. Затем вы вошли в свой аккаунт. Это означает, что приложение Facebook в вашем телефоне теперь настроено на использование вашей учетной записи. Теперь, если вы хотите опубликовать свою фотографию, вы не сможете сделать это, если загрузите и установите другое приложение Facebook и попытаетесь опубликовать оттуда. Вам придется использовать то же старое приложение, которое настроено для использования вашей учетной записи. (На самом деле вы не сможете загрузить два одновременно: P)

Таким же образом, вы должны указать навигатору стека перейти к экрану login навигатора стека, а не отображать другой экран login. Новый экран login, который вы создали, не будет иметь навигационную опору, если вы ее не пропустите.

Но есть и другой способ. Вы можете отобразить экран signup так же, как вы делаете экран login. Скопируйте этот код на ваш Welcome.js:

import React from 'react';
import { Text, View, Button } from 'react-native';
import LoginScreen from './LoginScreen';
import SignupScreen from './Signup';
import DrawerNavigator from '../navigation/DrawerNavigator';

const notLoggedIn=0, loggedIn=1, signingUp=2;

export default class Welcome extends React.Component{
    constructor(props){
        super(props);
        this.state={
            state: notLoggedIn
        }
    }

    render(){
        switch (this.state.state){
            case notLoggedIn:
                return (
                    <LoginScreen
                        onLoginPress={()=>this.setState({state:loggedIn})}
                        onSignUpPress={()=>this.setState({state:signingUp})}
                    />
                );
            case loggedIn:
                return <DrawerNavigator />;
            case signingUp:
                return <SignupScreen />; //Add onBackPress={()=>this.setState({state:notLoggedIn})}} prop here if you want
        }
    }
}

Затем в вашем Login.js измените onPress prop с this.props.navigation.navigate('Signup') на this.props.onSignUpPress().

Теперь вам не понадобится стековый навигатор (теперь у вас есть собственный навигатор). Таким образом, вместо того, чтобы использовать этот стековый навигатор, теперь вы можете напрямую использовать экран Welcome. Теперь вы можете просто удалить файл stacknavigator.js.

Это должно сработать, я думаю.

Совет: увидел, что у вас есть много неиспользуемых стилей и импорт в ваших файлах. Если вы не собираетесь их использовать, вы можете просто удалить эти строки. Это зависит от вас.

EDIT:

Чтобы передать функцию в навигатор, вы можете использовать опору screenProps.

Отредактируйте Welcome.js:

case loggedIn:
  return <DrawerNavigator logout={()=>this.setState({state:notLoggedIn})} />;

DrawerNavigator.js

...
const DrawerNavigator = createAppContainer(createDrawerNavigator(
  ...
));

export default class navigator extends React.Component {
  render(){
    return <DrawerNavigator screenProps={{logout: this.props.logout}} />
  }
}

А внутри вашего logout.js вызывайте функцию this.props.screenProps.logout() откуда угодно. Это должно работать.