Как перейти к другому компоненту, который не получает реквизит реагирующей навигации?

Question

Я работаю с React Native и React Navigation.

У меня есть компонент App.js, в котором я объявляю навигацию по ящикам React-Navigation.

В этом у меня естьвозможность выйти из системы, но я не могу перейти к другому компоненту после удаления AsyncStorage

Кто-нибудь знает, как этого добиться?

Спасибо.

Это мой код:

App.js

import { createDrawerNavigator, DrawerItems, NavigationActions } from 'react-navigation';

const customDrawerComponent = (props) => (
    <SafeAreaView style={{ flex: 1 }}>
            <ScrollView>
                <DrawerItems
                    {...props}
                />
                <TouchableOpacity  style={styles.button} onPress={this.logOut} >
                    <Text> Logout </Text>
                </TouchableOpacity>
            </ScrollView>
    </SafeAreaView>
);

logOut = () => {
        // NOT WORKS
        // this.props.navigation.navigate('Login')

        //NOT WORKS:
    this.myAction();
}

myAction = () => {
    const nav = NavigationActions.navigate({
      routeName: 'App',
    });
    return nav;
  };

const AppDrawNavigator = createDrawerNavigator(
  {
    MainComponent: { screen: MainComponent,
        navigationOptions: ({navigation}) => ({
            drawerLockMode: 'locked-closed'
          }) },
    Login: { screen: LoginComponent,
        navigationOptions: ({navigation}) => ({
            drawerLockMode: 'locked-closed'
          }) },
    User: { screen: UsersComponent }
    },
    {
        contentComponent: customDrawerComponent,
    }
);

Answer 1

Ваша функция выхода из системы объявлена ​​вне Навигатора.Это означает, что у вас нет доступа к опоре навигации там.Однако ваш customDrawerComponent - это экран вашего навигатора, и он должен иметь к нему доступ.

Таким образом, вы можете попробовать что-то вроде этого (реквизиты - это реквизиты, переданные в customDrawerComponent):

onPress={()=> {props.navigation.navigate("Login")}}

Плюс ваш App.js кажется странным, поскольку вы не экспортируете какие-либосоставная часть.Вы вставили весь код App.js или только его части?

Answer 2

Из вашего вопроса я понимаю, что либо вы хотите: -

1. переходить из-за пределов компонентов
2. переходить из компонентов, которые не имеют навигационной опоры.

Для этого я попробовал 2 решения, и оба они работают очень хорошо, хотя я опирался на второе.

Первое решение

Использование с навигацией из react-navigation упаковки.Если ваши компоненты глубоко вложены, у них не будет навигационной поддержки, если вы не укажете их вручную или не поместите их в контекст; передача навигационной поддержки становится настоящей болью.Поэтому вместо этого используйте withNavigation , и ваш компонент будет иметь навигационную опору.

import {withNavigation} from "react-navigation";

const Component = ({navigation}) => {
  const onPress = () => {
    navigation.navigate(//ROUTE_NAME//)
  }
  return (
    <TouchableOpacity onPress={onPress}>
      <Text>Navigate</Text>
    </TouchableOpacity>
  )
}

export default withNavigation(Component);

Второе решение

Создайте вспомогательный скрипт и используйте его.

"use strict";

import React from "react";
import {NavigationActions} from "react-navigation";

let _container; // eslint-disable-line


export const navigation = {
  mapProps: (SomeComponent) => {
    return class extends React.Component {
      static navigationOptions = SomeComponent.navigationOptions; // better use hoist-non-react-statics
      render () {
        const {navigation: {state: {params}}} = this.props;
        return <SomeComponent {...params} {...this.props} />;
      }
    }
  },
  setContainer: (container) => {
    _container = container;
  },
  reset: (routeName, params) => {
    _container.dispatch(
      NavigationActions.reset({
        index: 0,
        actions: [
          NavigationActions.navigate({
            type: "Navigation/NAVIGATE",
            routeName,
            params
          })
        ]
      })
    );
  },
  goBack: () => {
    _container.dispatch(NavigationActions.back());
  },
  navigate: (routeName, params) => {
    _container.dispatch(
      NavigationActions.navigate({
        type: "Navigation/NAVIGATE",
        routeName,
        params
      })
    );
  },
  navigateDeep: (actions) => {
    _container.dispatch(
      actions.reduceRight(
        (prevAction, action) =>
          NavigationActions.navigate({
            type: "Navigation/NAVIGATE",
            routeName: action.routeName,
            params: action.params,
            action: prevAction
          }),
        undefined
      )
    );
  },
  getCurrentRoute: () => {
    if (!_container || !_container.state.nav) {
      return null;
    }

    return _container.state.nav.routes[_container.state.nav.index] || null;
  }
};

В вашем родительском компоненте при монтировании вызова навигации выполните следующее: -

"use strict";

import React from "react";
import App from "./routes";
import {navigation} from "utils";

class Setup extends React.Component {
  render () {
    return (
      <App
        ref={navigatorRef => {
          navigation.setContainer(navigatorRef);
        }}
      />
    );
  }
}

export default App;

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

import {navigate} from "utils/navigation";

Для более подробной информации вы можете это поток

Answer 3

сделать это как класс, подобный

экспортировать класс по умолчанию Приложение расширяет React.Component {

constructor(props) {
    super(props)

    this.state = {

    }
}