隐藏堆栈导航React导航头

我试图使用堆栈和选项卡导航器切换屏幕。

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

在这种情况下，首先使用堆栈导航器，然后使用制表器。我想从堆栈导航器中隐藏头文件。这是不正常工作时，我使用导航选项::

navigationOptions: { header: { visible: false } }

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

当前回答

你可以像这样隐藏StackNavigator头:

const Stack = createStackNavigator();
function StackScreen() {
    return (
        <Stack.Navigator
            screenOptions={{ headerShown: false }}>
            <Stack.Screen name="Login" component={Login} />
            <Stack.Screen name="Training" component={Training} />
            <Stack.Screen name="Course" component={Course} />
            <Stack.Screen name="Signup" component={Signup} />
        </Stack.Navigator>
    );
}

2020-04-28 04:52:18

其他回答

如果有人搜索如何切换头文件，那么在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,
});

2018-03-17 23:02:44

另一种隐藏特定屏幕标题的方法是尝试使用React中的useLayoutEffect。是这样的:

import { View, Text, Button } from "react-native";
import React, { useLayoutEffect } from "react";
import { useNavigation } from "@react-navigation/native";
import useAuth from "../hooks/userAuth";
const HomeScreen = () => {
  const navigation = useNavigation();
  const { logout } = useAuth();
  useLayoutEffect(() => {
    navigation.setOptions({
      headerShown: false,
    });
  }, []);

  return (
    <View>
      <Text>I am the HomeScreen</Text>
      <Button
        title="Go to Chat Screen"
        onPress={() => navigation.navigate("Chat")}
      />

      <Button title="Logout" onPress={logout} />
    </View>
  );
};

export default HomeScreen;

这通常允许隐藏组件头，它将在屏幕呈现时执行。

2022-08-01 06:00:19

如果你想从整个屏幕中删除头部，去app.js并将这段代码添加到Stack中。导航器

screenOptions={ { headerShown: false } }

2020-07-22 11:51:36

如果你想隐藏在特定的屏幕上，可以这样做:

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

2018-02-21 06:35:01

const MyNavigator = createStackNavigator({
  FirstPage: {screen : FirstPageContainer, navigationOptions: { headerShown:false } },
  SecondPage: {screen : SecondPageContainer, navigationOptions: { headerShown: false } }
});

//header:null will be removed from upcoming versions

2020-02-02 18:58:17

隐藏堆栈导航React导航头

推荐文章

最新文章

标签