反应本机导航抽屉未打开答案

【问题标题】：react-native-navigation drawer not opening反应本机导航抽屉未打开
【发布时间】：2018-01-05 19:48:05
【问题描述】：

单击导航栏按钮抽屉未打开。这是我用于按钮按下的代码

if (event.type === 'NavBarButtonPress') {
        if (event.id === 'sideDrawerToggle') {
            this.props.navigator.toggleDrawer({
                side: 'left',
                animated: true,
            });
        }
    }

这是抽屉的设置

Navigation.startTabBasedApp({
        tabs: [
            {
                label: 'Find Place',
                screen: 'places.FindPlace',
                title: 'Find Place', 
                icon: source[0],
                navigatorButtons: {
                    leftButtons: [
                        {
                            icon : source[2],
                            title : 'Menu',
                            id: 'sideDrawerToggle'
                        }
                    ]
                }
            },
            {
                label: 'Share Place', 
                screen: 'places.SharePlace', 
                title: 'Share Place', 
                icon: source[1],
                navigatorButtons: {
                    leftButtons: [
                        {
                            icon: source[2],
                            title: 'Menu',
                            id: 'sideDrawerToggle'
                        }
                    ]
                }
            }
        ],
        drawer: {
            left: { 
                screen: 'places.SideDrawer'
            }
        }
    });

这就是我的抽屉的样子

    import React, {Component} from 'react';
import {View, Text, Dimensions} from 'react-native';


class SideDrawer extends Component {
    render() {
        return(
            <View style={[
                styles.container,
                {width: Dimensions.get('window').width * 0.8}
            ]}>
                <Text>Drawer</Text>
            </View>
        );
    }
}

const styles = {
    container: {
        backgroundColor : 'white',
        paddingTop: 22,
        flex: 1
    }
};


export default SideDrawer;

通过大量搜索，我发现为抽屉提供固定宽度可以解决问题。但在我的情况下它没有解决。我不知道代码有什么问题，它工作正常。

【问题讨论】：

标签： react-native react-native-navigation

【解决方案1】：

你可以简单地使用

this.props.navigation.openDrawer();

在你的屏幕上。

请查看以下链接中的官方文档和示例

https://reactnavigation.org/docs/en/drawer-based-navigation.html

https://reactnavigation.org/blog/#drawer-routes-have-been-replaced-with-actions

【讨论】：

drawer-routes-have-been-replaced-with-actions 非常有帮助。我试图让它通过从左到右滑动表单来工作。

【解决方案2】：

您可以使用id: 'sideMenu' 在navigatorButtons 中指定一个内置按钮，它会为您施展魔法。 IE。

...
navigatorButtons: {
  leftButtons: [
    {
      id: "sideMenu"
    }
  ]
},
...

【讨论】：

【解决方案3】：

我认为这不是设置抽屉导航的正确方法。在此处查看官方文档：https://reactnavigation.org/docs/navigators/drawer。它表明抽屉将导航到的每个组件都是您在应用程序的主组件中定义和设置的场景。

我还建议使用来自 NativeBase.io https://docs.nativebase.io/Components.html#Drawer 的抽屉。这让您在 iOS 和 Android 上都有更好的外观和感觉，看起来更原生。

【讨论】：

我使用的是 wix 的 react-native-navigation 而不是官方的 react-navigation

【解决方案4】：

您使用的是 iPhone 吗？ wix 中似乎有一个错误，它会影响他们，但不会影响 Android。

深层链接可能会起作用https://wix.github.io/react-native-navigation/#/deep-links

【讨论】：

我没有使用 android，它工作正常。现在不是。
如何通过深度链接处理抽屉？？你能分享一个例子吗？？