WebView 与 react-native-router-flux NavBar 一起使用,但不适用于 sayem/ui NavigationBar
Posted
技术标签:
【中文标题】WebView 与 react-native-router-flux NavBar 一起使用,但不适用于 sayem/ui NavigationBar【英文标题】:WebView works with react-native-router-flux NavBar but not with shoutem/ui NavigationBar 【发布时间】:2016-12-26 06:54:09 【问题描述】:当我尝试使用带有 WebView 的自定义 NavigationBar 时,我的 NavigationBar 的后退按钮不可点击/按下
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
中呈现 NavigationBar,则后退按钮是可点击的。如果我从 Post.js
中删除自定义 NavigationBar 并在 Router.js
中使用默认路由器,则后退按钮是可点击的,并且 WebView 是可见的。
【问题讨论】:
【参考方案1】:我通过在Router.js
中将自定义组件作为navBar
属性传递给它来工作
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>
/>
)
【讨论】:
以上是关于WebView 与 react-native-router-flux NavBar 一起使用,但不适用于 sayem/ui NavigationBar的主要内容,如果未能解决你的问题,请参考以下文章
Android WebView开发:WebView与Native交互