React native 无法在react native（android）中从DroperLayoutAndroid导航到任何其他屏幕

我有以下代码

Sidebar.js

从“React”导入React
从“react native”导入{视图、文本、样式表、图像、TouchableHighlight}；
从“react native”导入{Dimensions}；
从“反应本机向量图标/羽毛”导入羽毛；
//const WIDTH=Dimensions.get（'window'）.WIDTH；
const HEIGHT=维度.get（'window'）。高度；
const logo=require（'../assets/logo1.png'）；
导出默认类边栏扩展React.Component{
建造师（道具）{
超级（道具）；
this.handleNavigation=this.handleNavigation.bind（this）；//应该将其绑定到调用props的方法
}
手航{
this.props.navigation.navigate（'QuoteDay'）；
}
render（）{
返回(
警报（'Pressed！'）}>
引用
每日名言
)
}
}

问题在于，

侧边栏

没有在导航器的屏幕内呈现，因此没有收到解释错误的

导航

道具

我建议您使用react navigation的抽屉（）而不是Android的

DrawerLayoutAndroid

。通过将

侧栏

传递到react navigator抽屉导航器的

抽屉内容

道具，您仍然可以以这种方式使用自定义的

侧栏

组件布局

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>
);

// 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 />;
  }
}

从'@react-navigation/native'导入{NavigationContainer}；
从'@react navigation/stack'导入{createStackNavigator}；
从'@react导航/drawer'导入{createDrawerNavigator}；
从“/path”导入侧栏；
//其他进口。。。
const Home=createStackNavigator（）；
const Main=createDrawerNavigator（）；
常量MainNavigator=（）=>{
返回(
}>
);
};
常量HomeNavigator=（）=>(
);
导出常量AppNavigator=（）=>(
);

App.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>
);

// 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 />;
  }
}

//确保从“react native”导入状态栏以设置状态栏颜色
导出默认类App扩展React.Component{
componentDidMount（）{
StatusBar.setBackgroundColor（“#F0B27A”）；
}
render（）{
返回；
}
}

---

所以我在这里采用的方法是创建一个抽屉导航器，并使其成为主导航器。

HomeNavigator

是此

MainNavigator

的一个屏幕。这样，

MainNavigator

内的每个屏幕都可以访问抽屉和导航道具；在这种情况下，这意味着

HomeNavigator

和它的每个屏幕。

非常感谢它工作得非常完美我学到了一些新的东西，再次感谢您提供了如此清晰的建议和解决方案