如何在不更改React Native中的路径的情况下更改NavigatorIOS的标题

Question

我的应用程序中有一个NavigatorIOS和TabBarIOS。我想在选中标签时更改当前路线的标题。

第一种不起作用的方式

在创建NavigatorIOS时，我在 state 对象中使用变量，但更新状态并未更改标题。 （即使再次调用渲染）

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

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

第二种不起作用的方式

我还尝试更新NavigatorIOS的状态，我称之为 nav 。 NavigatorIOS的状态中有一个 routeStack 对象，用于保存路由项的数组。所以我通过NavigatorIOS的 setState 更新了数组，但它也没有用。

第三种不起作用的方式

我尝试将标题从 Objective C 更改为原生模块，但我无法从NSObject到达该特定导航栏。

我希望有人可以提供帮助。

Answer 1

I think you're supposed to be able to do this with navigator.replace but at the moment the replacement of the title seems to be broken:

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);

顺便说一句，您也可以通过以下代码更改NavigatorIOS的tintColor ...

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'});