1

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 のみをレンダリングすると、クリック可能になります。カスタムの NavigationBar を削除しPost.jsてデフォルトのルーターを使用するとRouter.js、戻るボタンはクリック可能になり、WebView が表示されます。

4

1 に答える 1

2

カスタムコンポーネントをnavBar小道具として渡すことで動作するようになりましたRouter.js

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>}
      />
    )
  }
}
于 2016-12-26T07:16:05.780 に答える