WebView работает с панелью навигации react-native-router-flux, но не с панелью навигации Shokem/UI.

Когда я пытаюсь использовать пользовательскую панель навигации с WebView, кнопка «Назад» моей панели навигации не нажимается/нажимается

Router.js

  render() {
    return (
      <Router
        hideNavBar={true}
      >
        <Scene key='root' passProps={true}>
          <Scene
            key='Posts'
            title='Posts'
            component={PostList}
            passProps={true}
            initial={true}
          />
          <Scene
            key='Random'
            title='Random'
            component={Random}
            passProps={true}
            style={{paddingTop: 70}}
          />
          <Scene
            key='Login'
            title='Login'
            component={Login}
            passProps={true}
            style={{paddingTop: 70}}
          />
          <Scene
            key='Post'
            title='Post'
            component={Post}
            passProps={true}
          />
        </Scene>
      </Router>
    );
  }

Post.js

import {
  NavigationBar,
  Title,
} from '@shoutem/ui'

class Post extends Component {
  render() {
    console.log(this.props.uri)
    return (
      <View
        style={styles.main}
      >
        <NavigationBar
          centerComponent={<Title>{this.props.title}</Title>}
          hasHistory
        />
        <WebView
          source={{uri: this.props.uri}}
          style={styles.webView}
        />
      </View>
    )
  }
}

Однако, если я удалю WebView и отобразлю только панель навигации в Post.js, кнопка «Назад» будет нажата. Если я удалю пользовательскую панель навигации из Post.js и использую маршрутизатор по умолчанию в Router.js, кнопка «Назад» станет доступной для нажатия, а WebView станет видимым.


react-native javascript shoutem
person sheepdog    schedule 26.12.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я заставил его работать, передав пользовательский компонент в качестве реквизита navBar в Router.js

Router.js

import TopNav from '../components/TopNav.js'

class AppRouter extends Component {
  render() {
    return (
      <Router
        navBar={TopNav}
      >
      ...
      </Router>
    )
    ...

TopNav.js

import React, { Component } from 'react'
import { StyleSheet } from 'react-native'
import {
  Actions,
  ActionConst,
} from 'react-native-router-flux'

import {
  NavigationBar,
  Title,
} from '@shoutem/ui'

import DrawerSwitch from '../components/DrawerSwitch.js'

export default class CustomNav extends Component {
  render(){
    return (
      this.props.hasHistory ?

      <NavigationBar
        hasHistory
        navigateBack={Actions.pop}
        centerComponent={<Title>{this.props.title}</Title>}
      /> :
      <NavigationBar
        leftComponent={<DrawerSwitch iconName='sidebar'/>}
        centerComponent={<Title>{this.props.title}</Title>}
      />
    )
  }
}
person sheepdog    schedule 26.12.2016