React Native Router Flux: как стилизовать кнопку и панель навигации NavDrawer?

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

Спасибо


ios react-native reactjs javascript react-native-router-flux
person Community    schedule 07.10.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Итак, мне было интересно, как я могу настроить значок меню по умолчанию в react-native-drawer?

Я использую react-native-vector-icons, который позволяет вам выбирать значки из нескольких различные коллекции, в том числе Значки материалов от Google. Вот как выглядит код в моем случае:

Во-первых, я использую опору 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 })
}

Итак, как я могу выровнять элементы на панели навигации по центру по горизонтали?

Я думаю, вы имели в виду выровнять по вертикали. Попробуйте это решение, предлагающее использовать flexbox со следующим стилем:

  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
person Georgios    schedule 07.10.2016
comment
Оцените ответ. Что касается первого примера, не могли бы вы показать полный .js пример NavigationItems.js, который вы предоставили для пояснения? Что касается выравнивания, да, извините, я имел в виду вертикальный центр, и я попробовал это как navigaitonBarStyle, но кнопки не двигались. Это то место, где я должен был стилизовать? Еще раз спасибо - person ; 07.10.2016
comment
Просто проверяю, видели ли вы мой предыдущий комментарий. Пожалуйста, дай мне знать. - person ; 09.10.2016
comment
Привет и извините за задержку. NavigationItems.js в основном содержит эти две функции. Вы также можете переместить их в тот же файл, в котором вы определяете свои сцены. Удалось ли настроить значок по умолчанию с помощью react-native-vector-icons или другого модуля? Что касается выравнивания, да, я ожидал, что он сработает, если установить его как navigationBarStyle. Этот стиль должен быть определен в родительском компоненте значков, которым, как я полагаю, является панель навигации. - person Georgios; 09.10.2016
comment
Да, я попробовал значок, но не сработало. Полный пример действительно поможет. Что касается выравнивания, я попробовал, но элементы вообще не двигались. - person ; 18.10.2016