2

在 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/>

谢谢

4

1 回答 1

1

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

我使用react-native-vector-icons，它允许您从几个不同的集合中选择图标，包括 Google 的Material Icons。在我的例子中，代码如下所示：

首先，我使用renderLeftButtonScene 道具来渲染我的自定义按钮。

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

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

我认为您的意思是垂直对齐。试试这个建议使用具有以下样式的 flexbox 的解决方案：

  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
于 2016-10-07T14:59:58.757 回答