无法从 DrawerLayoutAndroid 导航到 React Native 中的任何其他屏幕 (android)

Question

我有以下代码

Sidebar.js

import React from 'react'
import {View,Text,StyleSheet,Image,TouchableHighlight} from 'react-native';
import {Dimensions} from 'react-native';
import  Feather  from 'react-native-vector-icons/Feather';

// const WIDTH = Dimensions.get('window').width;
const HEIGHT = Dimensions.get('window').height;

const logo = require('../assets/logo1.png');


export default class Sidebar extends React.Component {
    constructor(props){
        super(props);
        this.handleNavigation = this.handleNavigation.bind(this);// you should bind this to the method that call the props
    }
    
    handleNavigation(){
        this.props.navigation.navigate('QuoteDay');
    }
    render() {
        return (
            <View style={styles.navigationContainer}>
               <View style={styles.logoContainer}>
                    <Image  style={styles.logo}
                     source={logo} />   
               </View>
                    </TouchableHighlight>
                    <TouchableHighlight
                        activeOpacity={0.6}
                        underlayColor="#ffffff"
                        onPress={() => alert('Pressed!')}>
                        <Text style={styles.listitem}> <Feather name="edit" size={30} color="#273746"/> Quotes </Text>
                    </TouchableHighlight>
                    <TouchableHighlight
                        activeOpacity={0.6}
                        underlayColor="#ffffff"
                        onPress={this.handleNavigation}>
                        <Text style={styles.listitem}> <Feather name="sunrise" size={30} color="#273746"/> Quote of the Day </Text>
                    </TouchableHighlight>
               </View>
            </View>
        )
    }
}

App.js

import React from 'react';
import {DrawerLayoutAndroid} from 'react-native';
import {AppNavigator} from './screens/Navigation';
import Sidebar from './screens/Sidebar';

export default class App extends React.Component {

  render(){
    const navigationView = (
      <Sidebar/>
    );
    return (
        <DrawerLayoutAndroid
          drawerWidth={300}
          drawerPosition="left"
          statusBarBackgroundColor="#F0B27A"
          renderNavigationView={() => navigationView}
        >
          <AppNavigator />
       </DrawerLayoutAndroid>
    )
  }
}

Navigation.js

import React from 'react';
import 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { HomeScreen } from './Home';
import { ModalScreen } from './Modal';
import { QuoteScreen } from './QuoteDay';

const { Navigator, Screen } = createStackNavigator();

const HomeNavigator = () => (
  <Navigator mode="modal" headerMode='none'>
    <Screen name='Home' component={HomeScreen} />
    <Screen name='MyModal' component={ModalScreen}/>
    <Screen name='QuoteDay' component={QuoteScreen}/>
  </Navigator>
);

export const AppNavigator = () => (
  <NavigationContainer>
    <HomeNavigator/>
  </NavigationContainer>
);

但它给我以下错误

TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate')

每当我尝试从 Sidebar.js 导航到任何其他屏幕时。

我该如何着手解决这类问题。

Answer 1

问题是 Sidebar 没有在导航器的屏幕内呈现，因此没有收到解释您遇到的错误的 navigation 道具。

我建议你使用反应导航的抽屉（https://reactnavigation.org/docs/drawer-navigator/）而不是DrawerLayoutAndroid。您仍然可以通过将 Sidebar 传递给反应导航的抽屉导航器的 drawerContent 道具，以这种方式使用您的自定义 Sidebar 组件布局。

Navigation.js

import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createDrawerNavigator} from '@react-navigation/drawer';
import Sidebar from './path';
// Other imports...

const Home = createStackNavigator();
const Main = createDrawerNavigator();

const MainNavigator = () => {
  return (
    <Main.Navigator
      drawerStyle={{width: 240}}
      drawerContent={(props) => <Sidebar {...props} />}>
      <Main.Screen name="HomeNavigator" component={HomeNavigator} />
    </Main.Navigator>
  );
};

const HomeNavigator = () => (
  <Home.Navigator mode="modal" headerMode="none">
    <Home.Screen name="Home" component={HomeScreen} />
    <Home.Screen name="MyModal" component={ModalScreen} />
    <Home.Screen name="QuoteDay" component={QuoteScreen} />
  </Home.Navigator>
);

export const AppNavigator = () => (
  <NavigationContainer>
    <MainNavigator />
  </NavigationContainer>
);

App.js

// Be sure to import StatusBar from 'react-native' for setting the status bar color 

export default class App extends React.Component {
  componentDidMount() {
    StatusBar.setBackgroundColor('#F0B27A');
  }

  render() {
    return <AppNavigator />;
  }
}

所以我在这里采用的方法是创建抽屉导航器并将其作为主导航器。 HomeNavigator就是这个MainNavigator的一个画面。这样 MainNavigator 中的每个屏幕都可以访问抽屉和导航道具；在这种情况下，这意味着 HomeNavigator 及其拥有的每个屏幕。

无法从 DrawerLayoutAndroid 导航到 React Native 中的任何其他屏幕 (android)

Not Able to Navigate from DrawerLayoutAndroid to any other screen in react native (android)

navigation-drawer

react-native

react-native-android

react-navigation

react-navigation-v5