在堆栈导航器中隐藏标头反应导航

Question

我正在尝试使用堆栈和标签导航器切换屏幕。

const MainNavigation = StackNavigator({
      otp: { screen: OTPlogin },
      otpverify: { screen: OTPverification},
      userVerified: {
        screen: TabNavigator({
          List: { screen: List },
          Settings: { screen: Settings }
        }),
      },
    });

在这种情况下，首先使用stacknavigator，然后使用tabnavigator。我想隐藏堆栈导航器的标题。当我使用像:::的导航选项时，它无法正常工作

navigationOptions: { header: { visible: false } }

我正在使用stacknavigator中使用的前两个组件上尝试此代码。如果我使用这一行然后得到一些错误，如::

Answer 1

我用它来隐藏堆栈栏（注意这是第二个参数的值）：

{
    headerMode: 'none',
    navigationOptions: {
        headerVisible: false,
    }
}

使用此方法时，它将隐藏在所有屏幕上。

在您的情况下，它将如下所示：

const MainNavigation = StackNavigator({
  otp: { screen: OTPlogin },
  otpverify: { screen: OTPverification },
  userVerified: {
    screen: TabNavigator({
    List: { screen: List },
    Settings: { screen: Settings }
   }),
 }
},
{
  headerMode: 'none',
  navigationOptions: {
    headerVisible: false,
  }
 }
);

Answer 2

这对我有用：

const Routes = createStackNavigator({
Intro: {
    screen: Intro,
    navigationOptions: {
        header: null,
    }
}
},
    {
        initialRouteName: 'Intro',
    }
);

Answer 3

const CallStack = createStackNavigator({
  Calls: Calls,
  CallsScreen:CallsScreen,
}, {headerMode: 'none'});

CallStack.navigationOptions = {
  tabBarLabel: 'Calls',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}
    />
  ),

   header: null,

        headerVisible: false,

};

Answer 4

所有答案都显示了如何使用类组件，但对于功能组件，您可以：

const MyComponent = () => {
    return (
        <SafeAreaView>
            <Text>MyComponent</Text>
        </SafeAreaView>
    )
}

MyComponent.navigationOptions = ({ /*navigation*/ }) => {
    return {
        header: null
    }
}

如果您删除标题，您的组件可能位于您无法看到它的位置（当手机没有方形屏幕时），因此在删除标题时使用它非常重要。

Answer 5

我有同样的问题，但我已经使用navigationOptions在各个类中完成了我的标题工作，我使用createBottomTabNavigator，其标题是可见的，类的标题是不可见的。我尝试了像headerMode: none，header: null等所有的东西，但无法隐藏bottomTabNavigator的标题。

Answer 6

只需在页面中使用以下代码即可隐藏标题

export default class Login extends Component {
    static navigationOptions = {
        header: null
    }
}

请参考Stack Navigator

Answer 7

只需将其添加到您的类/组件代码段中，就会隐藏Header

 static navigationOptions = { header: null }

Answer 8

如果你想隐藏在特定的屏幕上而不是这样：

// create a component
export default class Login extends Component<{}> {
  static navigationOptions = { header: null };
}

Answer 9

如果您的屏幕是类组件

static navigationOptions = ({ navigation }) => {
    return {
       header: () => null
    } 
}

在您的目标屏幕中将其编码为第一种方法（功能）。

Answer 10

如果有人在componentDidMount中搜索如何切换标题，请写如下：

  this.props.navigation.setParams({
      hideHeader: true,
  });

什么时候

static navigationOptions = ({ navigation }) => {
    const {params = {}} = navigation.state;

    if (params.hideHeader) {
      return {
        header: null,
      }
    }

    return {
        headerLeft: <Text>Hi</Text>,
        headerRight: <Text>Hi</Text>,
        headerTitle: <Text>Hi</Text>
    };
};

事件结束时的某个地方：

this.props.navigation.setParams({
  hideHeader: false,
});

Answer 11

使用

static navigationOptions = { header: null } 

在类/组件中

class Login extends Component {

    static navigationOptions = {
        header: null
    }
}

Answer 12

我使用header : null而不是header : { visible : true }我正在使用react-native cli。这是一个例子：

static navigationOptions = {
   header : null   
};

Answer 13

在您的目标屏幕中，您必须编写此代码！

 static navigationOptions = ({ navigation }) => {
    return {
       header: null
    }
 }