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交互

WebView 中 Java 与 JavaScript 的交互

webview加载网页与全屏播放视频?

android中webview与js交互

安卓开发webview与js交互

autojs正经的交互-安卓与webview