ネイティブToolbarAndroidをNavigatorと反応させる方法

Question

ToolbarAndroidとNavigatorコンポーネントを関連付ける方法を知りたいと思います。私の意図は、route.titleをToolbarAndroidの子（Textコンポーネントなど）に表示することです。この方法で、BackAndroidコンポーネントを使用している場合、私のタイトルは常に最新です！私はNavbar.NavigationBarを使用したくないのですが、ToolbarAndroidに組み込まれているオーバーフローメニューが欠けています。

ありがとうございました。誰もがこのためのよりよい解決策を持っている場合

//... some code before 

render() { 
    return(
    <DrawerLayoutAndroid 
     drawerWidth={300} 
     ref={(drawerElement) => { this.DRAWER = drawerElement; }} 
     drawerPosition={DrawerLayoutAndroid.positions.left} 
     onDrawerOpen={this.setDrawerState} 
     onDrawerClose={this.setDrawerState} 
     renderNavigationView={() => <DrawerMenu navigate={this.navigateTo} />} 
    > 
     <Icon.ToolbarAndroid 
     titleColor='#fff' 
     navIconName='md-menu' 
     onIconClicked={this.toggleDrawer} 
     actions={toolbarActions} 
     onActionSelected={this._onActionSelected} 
     style={styles.appBar} 
     overflowIconName="md-more" 
     > 
     <View> 
      <TouchableOpacity 
      onPress={this.navigateTo.bind(this, 0)} 
      style={styles.appBarLogo} 
      > 
      <Icon name="md-boat" size={30} color="#fff" /> 
      <Text 
       style={styles.appBarTitle} 
       numberOfLines={1} 
      > 
       {this.state.title} 
      </Text> 
      </TouchableOpacity> 
     </View> 
     </Icon.ToolbarAndroid> 
     <Navigator 
     initialRoute={routes[0]} 
     renderScene={(route, navigator) => { 
      switch (route.index) { 
      case 0: 
       return <Home /> 
      case 1: 
       return <Lindau />; 
      case 2: 
       return <About />; 
      case 3: 
       return <Credits />; 
      default: 
       return <Home />; 
      } 
     }} 
     configureScene={(route, routeStack) => 
      Navigator.SceneConfigs.FloatFromRight 
     } 
     ref={(nav) => { this._navigator = nav; }} 
     /> 
    </DrawerLayoutAndroid> 
); 
} 

Answer 1

だから、私を助けてください：

は、ここに私のコードです。いくつかの試みの後、私は可能な解決策を考え出しました。

「ルート」というコンポーネントの状態を作成した後、この状態でツールバーのタイトルを設定しました。基本的に、この状態は私のルートのスタックです。シーンを変更すると、私の状態でこのルートがプッシュされます。BackAndroidコンポーネントから戻ると、状態からルートが飛び出し、すべて正常に動作します。

ここでは、コード固定：

class App extends Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     routes: [0], // Here the state to fix the problem... 
     drawerClosed: true, 
    } 
    this.toggleDrawer = this.toggleDrawer.bind(this); 
    this._onActionSelected = this._onActionSelected.bind(this); 
    this.navigateTo = this.navigateTo.bind(this); 
    this.setDrawerState = this.setDrawerState.bind(this); 
    this.handlesBackButton = this.handlesBackButton.bind(this); 
    } 

    navigateTo(idx) { 
    this.setState({ 
     routes: [ ...this.state.routes, idx] 
    }); 
    this.DRAWER.closeDrawer(); 
    if (idx === 0) { 
     this._navigator.resetTo(routes[0]); 
     this.setState({ 
     routes: [0] 
     }); 
    } else { 
     this._navigator.push(routes[idx]); 
    } 
    } 

    handlesBackButton() { 
    if (this._navigator && this._navigator.getCurrentRoutes().length > 1) { 
     try { 
     this._navigator.jumpBack(); 
     const _routes = this.state.routes.slice(); 
     _routes.pop(); 
     this.setState({ 
      routes: _routes 
     }); 
     } catch(e) {} 
     return true; 
    } 
    return false; 
    } 

    render() { 
    return(
     <DrawerLayoutAndroid 
     drawerWidth={300} 
     ref={(drawerElement) => { this.DRAWER = drawerElement; }} 
     drawerPosition={DrawerLayoutAndroid.positions.left} 
     onDrawerOpen={this.setDrawerState} 
     onDrawerClose={this.setDrawerState} 
     renderNavigationView={() => <DrawerMenu navigate={this.navigateTo} />} 
     > 
     <Icon.ToolbarAndroid 
      titleColor='#fff' 
      navIconName='md-menu' 
      onIconClicked={this.toggleDrawer} 
      actions={toolbarActions} 
      onActionSelected={this._onActionSelected} 
      style={styles.appBar} 
      overflowIconName="md-more" 
     > 
      <View style={styles.appBarLogo}> // I have to fix this component view... 
      <TouchableOpacity 
       onPress={this.navigateTo.bind(this, 0)} 
      > 
       <Icon name="md-boat" size={30} color="#fff" /> 
      </TouchableOpacity> 
      <Text 
       style={styles.appBarTitle} 
       numberOfLines={1} 
      > 
       {routes[this.state.routes[this.state.routes.length - 1]].title} 
      </Text> 
      </View> 
     </Icon.ToolbarAndroid> 
     <Navigator 
      initialRoute={routes[0]} 
      renderScene={(route, navigator) => { 
      switch (route.index) { 
       case 0: 
       return <Home />; 
       case 1: 
       return <Lindau />; 
       case 2: 
       return <About />; 
       case 3: 
       return <Credits />; 
       default: 
       return <Home />; 
      } 
      }} 
      configureScene={(route, routeStack) => 
      Navigator.SceneConfigs.FloatFromRight 
      } 
      ref={(nav) => { this._navigator = nav; }} 
     /> 
     </DrawerLayoutAndroid> 
    ); 
    } 

}