Как использовать компонент NativeBase Header с react-native-router-flux?

Я пытался использовать ящик в своем проекте, где я использую в нем NativeBase и react-native-router. Все работает, за исключением того, что кнопка внутри заголовка не работает (я не могу нажать на эту кнопку). Эта проблема возникает только в том случае, если я оберну свою главную страницу внутри <Scene key="draw">, вот мой код:

App.js

<Scene key="draw" component={SideMenu} open={false} hideNavBar={true}>
  <Scene key='main' component={Home} hideNavBar={true}/>
</Scene>

Заголовок на главной странице

<Left>
 <Button transparent onPress={()=>Alert.alert("burger tapped")}>
  <Icon name='menu' />
 </Button>
</Left>

Моя цель - когда я нажимаю кнопку, она открывает ящик, но кнопка вообще не работает, когда я делаю код, как в приведенном выше примере. Как я могу это исправить?


react-native native-base drawer react-native-router-flux
person Ega Setya Putra    schedule 19.05.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Распространенным обходным путем является размещение компонента заголовка из нативной базы в каждый компонент контейнера (экран). Этот подход реализован даже в их шаблон для Ignite.

Другой способ — добавить пользовательский NavBar в качестве опоры для компонента сцены. Измените встроенную панель навигации. использовать компоненты nativebase вместо компонентов по умолчанию:

import CustomNavBar from './CustomNavBar';
import Main from './Components/Main';

<Router>
  <Scene
   component={Main}
   key="main"
   type={ActionConst.RESET}
   navBar={CustomNavBar}
  />
</Router>

Удачи!

person Eugene Domotenko    schedule 19.05.2017
comment
Я уже пробовал это, но navBar из react-native-router не будет отображаться, если он обернут ‹Scene key=draw› - person Ega Setya Putra; 19.05.2017
comment
Вы пытались передать реквизит navBar компоненту Royter? - person Eugene Domotenko; 19.05.2017
comment
Я не пробовал, можете ли вы привести пример кода, как я могу это сделать? - person Ega Setya Putra; 19.05.2017
comment
‹Маршрутизатор navBar={CustomNavBar}› - person Eugene Domotenko; 19.05.2017
comment
Оказалось, что дочерние компоненты не получают реквизит navBar от родителя, поэтому он не будет работать для вложенных сцен. Укажите navBar явно для каждой сцены. - person Eugene Domotenko; 19.05.2017
comment
Я не могу понять Укажите navBar явно для каждой сцены. Можете ли вы объяснить больше или дать мне пример кода? - person Ega Setya Putra; 22.05.2017
comment
Я тоже так пробовал, у меня не сработало. CustomNavBar никогда не отображается. - person Ega Setya Putra; 22.05.2017
comment
Есть ли способ передать аргумент CustomNavBar, используя подход navBar={CustomNavBar}? - person Bhaskar Dabhi; 15.06.2019

arrow_upward
0
arrow_downward

NativeBase демонстрирует это с помощью NativeBase-KitchenSink.

Это должно ответить на ваш вопрос

person Supriya Kalghatgi    schedule 25.05.2017