单击包含 StackNavigator 的 header 打开抽屉

Question

这是包含我的抽屉的组件

export default class StackInView extends React.Component {
  render() {

    const Stack = StackNavigator({
      DrawerStack: { screen: DrawerInView }
    }, {
        headerMode: 'float',
      });

    return (
      <View style={{ flex: 1 }}>
        <Stack />
      </View>
    );
  }
}

下面是我定义按钮的地方。我想在屏幕的 navigationOptions 中定义按钮，因为按钮应该只出现在带有抽屉的屏幕上。但是点击按钮不起作用你能帮我吗？

... imports ...


export default class DrawerInView extends React.Component {
    static navigationOptions = {
        title: "Yeah?",
        headerRight: <Button title="Menu" onPress={() => {NavigationActions.navigate("DrawerOpen")}}/>
    }

    constructor(props) {
        super(props);
    }

    render() {
        const Drawer = DrawerNavigator({
            "one": {
                screen: () => {
                    return (<TabsInView select="something" />)
                },
            },
            "two": {
                screen: () => {
                    return (<TabsInView select="something else" />)
                },
            }
        })
        return (
            <View style={{ flex: 1 }}>
                <Drawer />
            </View>
        );
    }
}

Answer 1

不要将 Stack 放入视图中。很难看懂，你把所有的道具都弄坏了。

它不起作用的原因是第二个代码中的 navigationOptions 不是用于抽屉，而是用于第一个代码中的 StackNavigator。所以它不能执行抽屉的 navigation.navigate("DrawerOpen") 因为它是 StackNavigator 的。

我强烈建议您更改应用的层次结构。子Drawer把自己的导航传给父Stack的右键真的很难

然后，它看起来像这样。

const MyStack = StackNavigator({
    Tabs:{ screen: MyTabs, navigationOptions:(props) => ({
        headerRight:
            <TouchableOpacity onPress={() => {props.screenProps.myDrawerNavigation.navigate('DrawerOpen')}}>
                <Text>Open Drawer</Text>
            </TouchableOpacity>
    })}
}
, {navigationOptions:commonNavigationOptions})


const MyDrawer = DrawerNavigator({
    stack1: {
        screen: ({navigation}) => <MyStack screenProps={{myDrawerNavigation:navigation}} />,
    },
    stack2: {
        //more screen
    }
})

Answer 2

您可以像这样点击按钮打开抽屉导航。

<Button title="Menu" onPress ={ ( ) => this.props.navigation.openDrawer()} />

单击包含 StackNavigator 的 header 打开抽屉

Open Drawer by clicking in header of containing StackNavigator

react-native

react-navigation