Question

有没有办法通过我的场景传递的参数来更新我的navigationBar？我的意思是，我希望在我的场景中传递名称，背面和下一个按钮文本等参数，而不是我发现的方式：

this.props.navigator.push({ name: 'Second', component: Second });

我想传递给我的navbar params，例如title等。

感谢。

Answer 1

您可以使用routeMapper上的Navigator.NavigationBar道具来执行此操作。 routeMapper是一个定义三个函数的对象：LeftButton，Title和RightButton，导航栏用它来确定它应呈现的内容。这些函数中的每一个都有四个参数：

路线对象
导航器组件
当前路由堆栈中路由对象的索引
导航器组件的当前navState

例如，如果您想创建一个导航栏，您可以在其中自定义左右按钮文本和标题，您可以执行以下操作：

＆＃13;

const NavigationBarRouteMapper = {

  LeftButton(route, navigator, index, navState) {
    if (route.leftButtonText && route.leftButtonHandler) {
      return (
        <TouchableOpacity
          onPress={route.leftButtonHandler}
        >
          <Text>{route.leftButtonText}</Text>
        </TouchableOpacity>
      );
    }
    return null;
  },

  RightButton(route, navigator, index, navState) {
    if (route.rightButtonText && route.rightButtonHandler) {
      return (
        <TouchableOpacity
          onPress={route.rightButtonHandler}
        >
          <Text>{route.rightButtonText}</Text>
        </TouchableOpacity>
      );
    }
    return null;
  },

  Title(route, navigator, index, navState) {
    if (route.title) {
      return (
        <Text>
          {route.title}
        </Text>
      );
    }
    return null;
  },
};

＆＃13;

创建导航栏时，可以在routeMapper道具中传递此对象：

<Navigator.NavigationBar
  routeMapper={NavigationBarRouteMapper}
/>

然后您可以通过传递route title属性来呈现新标题：

this.props.navigator.push({
  id: 'your-route-id',
  title: 'Custom Title',
});

您的导航栏会收到您在route对象中推送的routeMapper对象，如上所示。

React Native：按场景更新navigatiorBar

1 个答案: