Как изменить название NavigatorIOS без изменения маршрута в React Native

Question

У меня есть NavigatorIOS и TabBarIOS в моем приложении. Я хочу изменить заголовок текущего маршрута при выборе вкладки.

первый способ, который не работал

При создании NavigatorIOS я пользователь переменная в состоянии объекта, но обновление состояния не изменить название. (Даже если рендер вызывается снова)

onTabChanged: function (title) { 
    this.setState({ 
    selectedTab: title, 
    }); 
}, 

render() { 
    return (
    <NavigatorIOS 
    ... 
    initialRoute={{ 
     component: Tabs, 
     title: this.state.selectedTab, 
     passProps: { 
     onTabChanged: this.onTabChanged 
     } 
    }} 
    /> 
); 
}, 

второй путь, который не работал

Я также попытался обновить состояние в NavigatorIOS о котором я говорил, как нав. Существует routeStack объект в состоянии NavigatorIOS, который хранит массив элементов маршрута. Поэтому я обновил массив через setState NavigatorIOS, но он тоже не работал.

третий путь, который не работал

Я пытался изменить название от Objective C, как родной модуль, но я не мог добраться до этой конкретной навигационной панели из NSObject.

Я надеюсь, что кто-то может помочь.

Answer 1

Я думаю, что вы должны быть в состоянии сделать это с navigator.replace, но на данный момент замена названия, кажется, сломана:

https://github.com/facebook/react-native/issues/476

Answer 2

var route = this.props.navigator.navigationContext.currentRoute; 
route.title = "newTitle"; 
route.rightButtonTitle = "newRightButtonTitle", 
route.onRightButtonPress =() => { 
    ; 
}; 
this.props.navigator.replace(route); 

Кстати, вы можете также изменить tintColor из NavigatorIOS по следующим кодом ...

var app = React.createClass({ 
    getInitialState: function() { 
     return { 
      shadowHidden: false, 
      barTintColor: '#f04f46', 
      titleTextColor: '#fff', 
      tintColor: '#fff', 
     } 
    }, 
    _navigator : function(navigatorProps){ 
     this.setState(navigatorProps); 
    }, 
    render: function(){ 
     return <NavigatorIOS ref='nav' style={styles.container} 
      shadowHidden={this.state.shadowHidden} 
      barTintColor={this.state.barTintColor} 
      titleTextColor={this.state.titleTextColor} 
      tintColor={this.state.tintColor} 
      translucent={false} 
      initialRoute={{ 
      title: title, 
      component: component, 
      passProps: Object.assign({ 
       navigatorHook: this._navigator, 
      }, this.props), 
      }} 
     />; 
    } 
}); 

Теперь, в следующем Componet

this.props.navigatorHook({tintColor: 'red'});