StackNavigator 中的不同 Headers

Question

我已经实现了一个 StackNavigator，其中出于样式目的删除了 header。

现在我在 StackNavigator 中有一个组件，我想为它取回 header。你觉得我怎么做到的？

这是我的 StackNavigator：

const Nav = StackNavigator(
{
    SplashScreen: {screen: SplashScreen},
    Login: {screen: Login},
    Register: {screen: Register},
    Main: {screen: MainNav},
},
{
    headerMode: 'none',
});

但是对于注册屏幕，我想要一个header（让用户知道他可以返回）。

我试过这样做：

static navigationOptions = {
    title: 'Register',
    header: {

    }
}

但我不太清楚 header 部分要放什么。

Answer 1

就我个人而言，我所做的是：当我不想显示它时，我将 header 的高度设置为 0 并设置为 n 以显示它，这样我就可以做一些类似的事情 height: condition ? 0 : 10

否则有人回答here

You can do it programmatically with the following code:

static navigationOptions = ({ navigation }) => ({   header:
> (navigation.state.params.thanks) => <HeaderView
> content={navigation.state.params.thanks} /> : null, })

And then you can set the state params with this:

componentWillMount() {   this.props.navigation.setParams({ thanks:"Something" }); }

Although I haven't tried the code myself and I'm not sure if something like the HeaderView is accessible for the public api in react-navigation and if there is a content property on that. But I think in an abstract way, this is how you set it programmatically.

我也没试过，但可能有用

编辑：github中给出的答案肯定更好，您可以从react-navigation导入HeaderView并执行header: condition ? HeaderView : null显示和隐藏它

StackNavigator 中的不同 Headers

Different Headers in StackNavigator

android

react-native

react-navigation