WebView 适用于 react-native-router-flux NavBar，但不适用于 shoutem/ui

Question

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

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

后.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中使用默认路由器，则后退按钮是可单击的，并且 Web 视图是可见的。

Answer 1

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

路由器.js

import TopNav from '../components/TopNav.js'
class AppRouter extends Component {
render() {
return (
<Router
navBar={TopNav}
>
...
</Router>
)
...

顶部导航.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>}
/>
)
}
}