Можно ли добавить пользовательские кнопки в NavBar в react-native-router-flux?

Я хочу добавить кнопку меню burger при просмотре определенных страниц и правую боковую кнопку, которая появляется на всех страницах. Возможно ли это с помощью react-native-router-flux?

UPDATE: я смог получить правую боковую кнопку без особых проблем, используя этот код

<Scene key="home"
       component={HomePage}
       hideBackImage={true}
       ...
       rightButtonImage={HelpIcon}
       onRight={()=>{}}
       rightTitle={null}
       rightButtonIconStyle={{ width: 44, height: 44 }} />

кнопка меню burger оказывается более сложной. Есть drawerImage свойство на панели навигации, но никакой другой документации о том, как сделать этот drawerImage появится и как установить функцию обработчика.

Я попытался установить rightButtonImage, onRight rightTitle и rightButtonIconStyle так же, как и для левой кнопки, но кнопка не появилась.

обновление 2: я понизился до react-native-router-flux v3.34.0 из-за этой проблемы:https://github.com/aksonov/react-native-router-flux/issues/1154

и добавил эти реквизиты к моей сцене:

...
renderBackButton={()=>{ return null; }} /* Hide the back button...goofy mechanism but it works */
leftButtonImage={NavigationBurgerIcon}
onLeft={()=>{}}
leftTitle={null}
leftButtonIconStyle={{ width: 30, height: 30 }}
...
6
react-native react-native-router-flux

2 ответов

вы можете написать свою собственную панель навигации для 100% управления. Вы можете структурировать свой компонент NavBar из их реализация NavBar и сделать следующее:

<Router 
  navBar={NavBar}
  ...
/>

на react-native-router-flux api более подробно об этом.

после этого вы можете создать пользовательские свойства для добавления в сцену, которые управляют различными пользовательскими поведениями NavBar в вашем проекте, например, как вы хотите взаимодействовать со значком гамбургера.

4

Вы можете сделать что-то вроде этого.

<Router renderLeftButton={this.navBarButton}>
  <Scene .....
</Router>

функция:

navBarButton(){
return(
  <TouchableOpacity onPress={() => Actions.refresh({ key: 'drawer', open: true })}>
    <Icon name='ios-menu' size={30} />
  </TouchableOpacity>
)

}

используя реагировать родной-вектор-иконки

2