Question

我想在导航发生后覆盖导航栏上的标题。

StackNavigator

const DashboardNavigator = new StackNavigator({
  Dashboard: {
    screen: HomeScreen,
    navigationOptions: {
      title: 'Home'
    }
  }
}, {
  navigationOptions
});

当我到达主页时，我想基本上将标题重命名为其他内容。我知道它很奇怪，但需要处理动态标题。

这是我尝试过的（ HomeScreen 单独的组件）：

  componentDidMount() {
    this.props.navigation.setParams({
      navigationOptions: {
        title: 'New title'
      }
    });
  }

这并没有什么不同。有什么建议？

另外值得一提的是我使用redux。

Answer 1

你可以试试这个：的 StackNavigator

const DashboardNavigator = new StackNavigator({ Dashboard: { screen: HomeScreen, } }, { navigationOptions });

HomeScreen 在您的主屏幕中检查您是否拥有动态标题，如果没有将标题设置为“主页”，但如果存在则将其设置为动态标题。

static navigationOptions = ({ navigation }) => ({ title: navigation.state.params ==='undefined' || navigation.state.params.title === 'undefined' ? 'Home': navigation.state.params.title });

然后像这样设置动态标题：

componentDidMount() { this.props.navigation.setParams({ title: 'your new title' }) }

Answer 2

在主屏幕中

试试这个

主屏幕

    static navigationOptions = ({ navigation }) => {
        return {
          title: navigation.state.params.headerTitle,
          headerRight: (
            <Icon
              name="calendar"
              type="octicon"
              color="#fff"
            />
          ),
          headerLeft: (
            <Icon
              name="keyboard-arrow-left"
              color="#fff"
              onPress={() => navigation.goBack(null)}
            />
          ),
          headerStyle: {
            backgroundColor: "#000",
            paddingLeft: 10,
            paddingRight: 10
          },
          headerTitleStyle: { color: "#fff", alignSelf: "center" }
        };
      };

componentDidMount() {
    this.props.navigation.setParams({
        headerTitle: 'New title'
    });
  }

覆盖导航栏标题

2 个答案: