react-native - 反应导航 - TabNavigator-> StackNavigator 中标题菜单图标的 DrawerNavigator
问题描述
我想在所有屏幕中全局显示 HeaderLeft 菜单图标。当我点击菜单图标时,我需要显示抽屉菜单。我使用“OpenDrawer”、“CloseDrawer”方法来打开/关闭抽屉菜单。
但我总是得到“ undefined is not a function (evaluating 'props.navigation.openDrawer()')"
。我也尝试了以下
props.navigation.dispatch(DrawerActions.openDrawer())
props.navigation.navigate(openDrawer())
但以上都没有奏效。这是我的部分代码
const MenuButton = (props) => {
return (
<View>
<TouchableOpacity onPress={() => { props.navigation.dispatch(DrawerActions.openDrawer())} }>
<Text>Menu</Text>
</TouchableOpacity>
</View>
)
};
const MyDrawerNavigator = createDrawerNavigator(
{
Wishist: {
screen: wishlist
},
},
{
contentComponent: SideMenuScreen,
drawerWidth: 200,
}
);
const AppNavigator = createBottomTabNavigator({
Home: {
screen: createStackNavigator({
Home: {
screen: Home
},
Contact: {
screen: Contact
}
},
{
defaultNavigationOptions: ({ navigation }) => ({
headerStyle: {
backgroundColor: 'white',
borderWidth:0,
borderBottomWidth:0
},
headerTitle: headerTitleNavigationOptions('HOME'),
headerLeft: <MenuButton navigation={navigation}/>,
headerRight: headerRightNavigatorOptions(navigation)
})
}),
navigationOptions: ({ navigation }) => ({
headerStyle: {
backgroundColor: 'white',
borderWidth:0,
borderBottomWidth:0
},
}),
}},
{
tabBarOptions: {
showLabel: false,
style: {
backgroundColor: 'white',
borderTopWidth:1
}
},
initialRouteName: 'Home',
tabBarComponent: TabBarBottom,
tabBarPosition: 'bottom',
animationEnabled: false,
swipeEnabled: false
}
);
const App = createAppContainer(AppNavigator);
解决方案
您需要按照文档中的说明DrawerActions
导入组件中的react-navigation-drawer
DrawerActions 是一个对象,其中包含用于生成特定于基于抽屉的导航器的操作的方法。它的方法扩展了 NavigationActions 中可用的操作。
支持以下操作:
openDrawer
- 打开抽屉closeDrawer
- 关闭抽屉toggleDrawer
- 切换状态,即。从关闭切换到打开,反之亦然
import { DrawerActions } from 'react-navigation-drawer';
this.props.navigation.dispatch(DrawerActions.openDrawer())
该react-navigation
api 不提供更多信息,但您可以查阅api 参考以NavigationActions
获取更多信息。
NavigationActions 参考
都
NavigationActions
返回一个可以使用navigation.dispatch()
方法发送到路由器的对象。请注意,如果您想调度
react-navigation
操作,您应该使用此库中提供的操作创建器。
您需要导入NavigationActions
您的组件,然后您可以dispatch
使用类似this.props.navigation.dispatch(navigateAction);
import { NavigationActions } from 'react-navigation';
const navigateAction = NavigationActions.navigate({
routeName: 'Profile',
params: {},
action: NavigationActions.navigate({ routeName: 'SubProfileRoute' }),
});
this.props.navigation.dispatch(navigateAction);
也正如Ashwin Mothilal所解释的,确保您navigation
在组件内传递道具。例如,您可以运行 aconsole.warn(props)
并立即在模拟器上查看结果。这是您的组件:
import { DrawerActions } from 'react-navigation-drawer';
const MenuButton = (props) => {
return (
<View>
<TouchableOpacity onPress={() => {
console.warn(props);
props.navigation.dispatch(DrawerActions.openDrawer());
}}>
<Text>Menu</Text>
</TouchableOpacity>
</View>
)
};
推荐阅读
- javascript - 创建 json 数组并从表单中追加对象
- c# - 使用队列保持多个倒数计时器
- javascript - 使用 DOM 绘制钟摆
- java - 骆驼路线使用多个线程将文件从本地文件夹移动到 sftp 文件夹
- regex - 使用记事本++删除@之前不包含数字的行
- mysql - mysql 可以用来限制 VARCHAR 的每一行的长度等于同一行中的 INT 列吗?
- java - 字节数据类型的转换
- angular - 来自 web api 的数据,它不在 Html 页面中显示
- python - Argparse:如果两者共享父级,则子解析器的选项会覆盖 main
- oracle - 为什么具有默认值的参数为空?