javascript - WebView 与 react-native-router-flux NavBar 一起使用，但不适用于 sayem/ui NavigationBar

Question

当我尝试将自定义 NavigationBar 与 WebView 一起使用时，我的 NavigationBar 的后退按钮不可点击/不可按下

路由器.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>
    )
  }
}

Post.js但是，如果我删除 WebView 并且仅在后退按钮中呈现 NavigationBar是可点击的。如果我从中删除自定义 NavigationBarPost.js并使用默认路由器，Router.js则后退按钮是可点击的，并且 WebView 是可见的。

Answer 1

我通过将自定义组件作为navBar道具传递给它来工作Router.js

路由器.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>}
      />
    )
  }
}