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

Posted 2023-02-23

【中文标题】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>
      />
    )