のWebViewはshoutem/UI NavigationBar

Question

でない反応するネイティブ・ルータ・フラックスナビゲーションバーで動作しますが押下可能/クリックできない

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が表示されます。

Answer 1

私はそれが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>} 
     /> 
    ) 
    } 
} 

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