Nano Hash - криптовалюты, майнинг, программирование

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

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

Я попытался создать константу, которая была бы свойством навигации, но я получаю то же самое. Если я делаю все свои экраны в одном файле с помощью 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 — это файл, который проверяет, не вошел ли пользователь в систему.

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



Ответы:


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 с this.props.navigation.navigate('Signup') на this.props.onSignUpPress().

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

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

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

ИЗМЕНИТЬ:

Чтобы передать функцию в навигатор, вы можете использовать свойство 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() из любого места. Это должно работать.

01.07.2019
  • О : o Теперь это работает, да, я знал, что проблема была в правильном отображении экрана, а не в навигаторе. Большое спасибо за вашу помощь: D. Наконец, вы случайно не знаете, могу ли я добавить реквизит в свой drawerNavigator, чтобы выйти из системы и вернуть его на экран входа в систему? Я пытался добавить реквизиты в DrawerNavigator, но, похоже, он ничего не делает. 01.07.2019
  • Здравствуйте, еще раз спасибо за ваш ответ, он отлично работает, да, я не знал об этой вещи screenProps, которую я пытался сделать без нее, и я не получил никаких результатов. Большое спасибо еще раз очень полезно! 04.07.2019
  • Новые материалы

    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

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

    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..