Question

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

所以我想知道如何自定义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，允许您从多个不同的集合中选择图标，包括Google的Material Icons。以下是我的代码中的代码：

首先，我使用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 })
}

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

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

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

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

1 个答案: