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

Posted 2023-03-15

【中文标题】React Native中如何在不改变路由的情况下改变NavigatorIOS的标题

【英文标题】：How to change the title of the NavigatorIOS without changing the route in React Native

【发布时间】：2015-06-14 13:31:55

【问题描述】：

我的应用中有一个 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
      
    
    />
  );
,

第二种方法无效

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

第三种没用的方法

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

希望有人能帮忙。

【问题讨论】：

不。我不能。我打算用 Navigator 替换 NavigatorIOS，但我现在不从事那个项目。导航器更灵活。

【参考方案1】：

我认为您应该能够使用 navigator.replace 执行此操作，但目前标题的替换似乎已被破坏：

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

【参考方案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),
           
        />;
    
);

现在，在下一个组件中

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