React Native Router Flux：如何设置 NavDrawer 的按钮和导航栏的样式？

Question

在 React Native Router Flux 中，我有一个功能性的 react-native-drawer，称为 NavDrawer。它目前在导航栏左侧有默认的汉堡菜单图标，并希望将其更改为另一个自定义图标。所以我尝试了，leftTitle='Menu'，但它没有改变。

所以我想知道如何自定义react-native-drawer 的默认菜单图标？

我还通过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

所以我想知道如何自定义 react-native-drawer 的默认菜单图标？

我使用react-native-vector-icons，它允许您从几个不同的集合中选择图标，包括谷歌的Material Icons。这是我的代码的样子：

首先，我使用renderLeftButton Scene 属性来渲染我的自定义按钮。

<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 })
}

那么如何在导航栏中水平居中对齐元素？

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

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