如何在React Native中不改变路由的情况下改变NavigatorIOS的标题 [英] How to change the title of the NavigatorIOS without changing the route in React Native

问题描述

我的应用中有 NavigatorIOS 和 TabBarIOS.我想在选择选项卡时更改当前路线的标题.

I have a NavigatorIOS and TabBarIOS in my app. I want to change the title of the current route when a tab selected.

在创建 NavigatorIOS 时，我在 state 对象中使用了一个变量，但更新状态并没有改变标题.(即使再次调用渲染)

While creating NavigatorIOS, I user a variable at state object but updating state didn't change the title. (even though the render is called again)

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

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

第二种方法无效

我还尝试更新我称为 nav 的 NavigatorIOS 的状态.在 NavigatorIOS 的 state 中有一个 routeStack 对象，它保存了一个路由项数组.所以我通过 NavigatorIOS 的 setState 更新了数组，但它也不起作用.

the second way that didn't work

I also tried updating the state of the the NavigatorIOS which I referred as nav. There is a routeStack object in the state of the NavigatorIOS which keeps an array of the route items. So I updated the array via setState of the NavigatorIOS but it didn't work either.

我尝试将 Objective C 的标题更改为 Native Module，但我无法从 NSObject 访问该特定导航栏.

I tried to change the title from Objective C as Native Module but I couldn't reach to that specific navigation bar from the NSObject.

希望有人能帮忙.

推荐答案

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

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

BTW, you can also change tintColor of NavigatorIOS by following code...

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),
          }} 
        />;
    }
});

现在，在下一个组件中

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

这篇关于如何在React Native中不改变路由的情况下改变NavigatorIOS的标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！