В React-Native попытка получить доступ к открытому ящику из навигатора стека в кнопке возврата заголовка - PullRequest
0 голосов
/ 05 августа 2020

Я новичок в нативной реакции, я хочу открыть ящик своей домашней страницы из запущенной навигации по стеку. js

запуск. js

import * as React from 'react';
import {Button, View} from 'react-native';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {Home, Login} from './screens';

const Drawer = createDrawerNavigator();
const AuthStack = createStackNavigator();
const LoginStack = createStackNavigator();
const HomeStack = createStackNavigator();

const LoginUI = ({navigation}) => {
  return (
    <LoginStack.Navigator>
      <LoginStack.Screen name="login" component={Login}></LoginStack.Screen>
    </LoginStack.Navigator>
  );
};

const HomeUI = ({navigation}) => {
  const closeDraw = () => {
    navigation.openDrawer();
  };
  return (
    <Drawer.Navigator initialRouteName="home">
      <Drawer.Screen name="home" component={Home} />
    </Drawer.Navigator>
  );
};

export default function App() {
  return (
    <NavigationContainer>
      <AuthStack.Navigator>
        <AuthStack.Screen name="login" component={LoginUI}></AuthStack.Screen>
        <AuthStack.Screen
          name="home"
          component={HomeUI}
          options={{
            headerLeft: () => (
              <Button
                title="ham"
                onPress={() => {
                  navigation.openDrawer();
                }}></Button>
            ),
          }}></AuthStack.Screen>
      </AuthStack.Navigator>
    </NavigationContainer>
  );
}

экраны. js

import * as React from 'react';
import {Button, View} from 'react-native';

export const Home = ({navigation}) => {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Button onPress={() => navigation.goBack()} title="Logout" />
    </View>
  );
};

export const Login = ({navigation}) => {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Button onPress={() => navigation.navigate('home')} title="Login" />
    </View>
  );
};

Я получаю следующее сообщение об ошибке.

Ошибка

Я столкнулся с ошибкой

Я пробовал использовать this.props.navigation.openDrawer (), который мне тоже не помог. Помогите, пожалуйста.

Спасибо.

1 Ответ

0 голосов
/ 05 августа 2020

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

<AuthStack.Screen
          name="home"
          component={HomeUI}
          options={({navigation})=>({
            headerLeft: () => (
              <Button
                title="ham"
                onPress={() => {
                  navigation.openDrawer();
                })}></Button>
            ),
          }}></AuthStack.Screen>
...