Question

我想隐藏标题，因为我已经在代码中设置了工具栏样式：

import {createStackNavigator}
from 'react-navigation'
const AppStackNavigator = createStackNavigator ({
  Home: HomePage,
  Friend: AddFriend,
  Bill: AddBill,
})
class App extends Component {
render() {
  return (
  <AppStackNavigator initialRouteName='Home'/>`<br>
  );
  }
}
export default App;

我应该在代码中添加什么？

Answer 1

像这样的代码更新您的代码

const AppStackNavigator = createStackNavigator ({
    Home: {
        screen: HomePage, 
        navigationOptions: {
            header: null,
        },
    },
})

如果您不想要所有屏幕的标题，那么

const AppStackNavigator = createStackNavigator ({
    Home: {
        screen: HomePage,
    },
},
{
    navigationOptions: {
        header: null,
    },
})

Answer 2

要为createStackNavigator中的所有视图禁用标题，可以使用headerMode选项。

const AppStackNavigator = createStackNavigator ({
  Home: HomePage,
  Friend: AddFriend,
  Bill: AddBill,
},
{
  headerMode: 'none',
})

参考：StackNavigatorConfig - createStackNavigator - React Navigation

Answer 3

您可以尝试：

static navigationOptions = {
    header: null
}

在屏幕组件内部。

Answer 4

要隐藏特定屏幕或全局屏幕的标题，可以执行

const StackNavigator = createStackNavigator({
    Home: {
        screen: HomePage,
        navigationOptions: {
            header: null // Will hide header for HomePage
        }
    }
}, {
    navigationOptions: {
        header: null // Will hide header for all screens of current stack navigator,
        headerLeft: <HeaderLeft /> // Component to be displayed in left side of header (Generally it can be Hamburger)
        headerRight: <HeaderRight /> // Component to be displayed in right side of header
    }
})

还请注意，特定于屏幕的设置将覆盖全局设置。希望这会有所帮助。

Answer 5

我使用以下代码隐藏了标题。

   {
    navigationOptions: {
        header: null // Will hide header for all screens of current stack 

    }

Answer 6

尝试一下
options ={{ header: () => {}}}
由于您没有明确向标头函数提供任何参数，因此不会显示任何标头。
有关更多信息，请参见：react native docs

Answer 7

2020更新-REACT NAVIGATION 5 +

使用header : null将不再起作用。在选项中，您需要将 headerMode 和 headerShown 都设置为 none 。 em> 更改为 false ，如下所示：

<AuthStack.Navigator> <AuthStack.Screen name="AUTH" component={AuthScreen} options={{headerMode: 'none', headerShown : false}}/> </AuthStack.Navigator>

Answer 8

由于某种原因，我能找到的所有答案都来自React导航v4，但在v5中不起作用。花了一些时间后，我想出了一种在v5中隐藏工具栏的方法。在这里：

import { createStackNavigator } from "@react-navigation/stack";
import { NavigationContainer } from "@react-navigation/native";

...

const Stack = createStackNavigator();

....
//and inside render
render(){
    return (
          <NavigationContainer>
            <Stack.Navigator>
              <Stack.Screen
                name="Home"
                component={HomeScreen}
                options={{
                  title: "Home",
                  headerShown: false,
                }}
              />
}

headerShown: false,这可以解决问题

如果您需要从v4迁移到v5的帮助-> https://reactnavigation.org/docs/upgrading-from-4.x/

Answer 9

navigationOptions: { 
    header: null
}

已弃用。新的是

navigationOptions: { 
    headerShown: false
}

参考：https://stackoverflow.com/a/62732551/8724367

如何在React Native上隐藏createStackNavigator的标头？

9 个答案: