如何设计NavDrawer的按钮和导航栏？

Question

在中，我有一个名为react-native-drawer的功能NavDrawer。它目前在导航栏左侧有默认的汉堡包菜单图标，并希望将其更改为另一个自定义图标。所以我试了一下，左边的tried =‘菜单’，但是没有改变。

因此，我想知道如何自定义react-native-drawer**'s默认菜单图标？**

我还通过navigationBarStyle更改了导航栏的高度，因此按钮目前位于导航栏的底部而不是中间。因此，在navigationBarStyle中，我尝试了flex: 1, flexDirection: 'row', alignItems: 'center'，但是没有改变任何东西。

，那么我如何使导航条中的元素水平对齐呢？

以下是代码：

        <Scene key='drawer' component={NavDrawer} open={false}>
          <Scene key="main" navigationBarStyle={styles.navigationBar} onRight={() => Actions.profile()} rightTitle='Profile'>
                        ...
          </Scene>
        <Scene/>

谢谢

Answer 1

因此，我想知道我如何定制反应-本地抽屉的默认菜单图标？

我使用反应-本机矢量图标，它允许您从几个不同的集合中选择图标，包括Google的材料图标。下面是代码在我的例子中的样子：

首先，我使用renderLeftButton场景道具来呈现我的自定义按钮。

<Scene key='navigationDrawerContentWrapper' navigationBarStyle={SceneStyle.navigationBar} titleStyle={SceneStyle.title}>
   <Scene key='mainScreen' component={MainScreen} title='Main Screen' renderLeftButton={NavigationItems.menuButton} sceneStyle={SceneStyle.scene} initial={true}/>
</Scene>

NavigationItems.js看起来是这样的：

const menuButton = () => {
    return (
        <TouchableOpacity onPress={openDrawer} style={Dimensions.iconSmall.touchableObject}>
            <Icon name='menu'
                size={24}
                color={#ffffff}/>
        </TouchableOpacity>
    )
}

const openDrawer = () => {
    Actions.refresh({ key: 'drawer', open: true })
}

那么，我如何使导航条中的元素水平对齐呢？

我认为您的意思是对齐垂直。尝试这解决方案，该解决方案建议使用具有以下样式的柔性盒：

  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }