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

您可以像这样在按钮单击上打开DrawerNavigation。

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

Answer 2

不要将Stack置于View中。这很难理解，你打破了所有道具。

它不起作用的原因是第二个代码中的navigationOptions不是抽屉，而是第一个代码中的StackNavigator。所以它不能执行抽屉的导航。导航（＆＃34;抽象打开＆＃34;），因为它是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
    }
})

单击包含StackNavigator的标题打开Drawer

2 个答案: