我正在尝试使用堆栈和标签导航器切换屏幕。
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中使用的前两个组件上尝试此代码。 如果我使用这一行然后得到一些错误,如::
答案 0 :(得分:92)
只需在页面中使用以下代码即可隐藏标题
export default class Login extends Component {
static navigationOptions = {
header: null
}
}
答案 1 :(得分:92)
我用它来隐藏堆栈栏(注意这是第二个参数的值):
{
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,
}
}
);
答案 2 :(得分:19)
只需将其添加到您的类/组件代码段中,即可隐藏Header
if self.navigationController?.interactivePopGestureRecognizer?.isEnabled != nil {
self.navigationController?.interactivePopGestureRecognizer?.isEnabled = false
}
答案 3 :(得分:14)
在给定的解决方案中,通过- options = {{headerShown:false}}
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} options={{headerShown:false}}/>
<Stack.Screen name="Details" component={DetailsScreen}/>
</Stack.Navigator>
</NavigationContainer>
答案 4 :(得分:8)
如果你想隐藏在特定的屏幕上而不是这样:
// create a component
export default class Login extends Component<{}> {
static navigationOptions = { header: null };
}
答案 5 :(得分:7)
如果您的屏幕是类组件
static navigationOptions = ({ navigation }) => {
return {
header: () => null
}
}
在目标屏幕中将其编码为第一种方法(功能)。
答案 6 :(得分:4)
您可以这样隐藏标题:
<Stack.Screen name="Login" component={Login} options={{headerShown: false}} />
答案 7 :(得分:4)
在stackNavigator中添加新的navigationOptions对象。
尝试一下:
const MainNavigator = createStackNavigator({
LoginPage: {screen : LoginPageContainer, navigationOptions: { header: null } },
MiddlePage: {screen : MiddlePageContainer, navigationOptions: { header: null } },
SMS: {screen: ShowSmsContainer, navigationOptions: { header: null } },
Map: {screen: ShowMapContainer, navigationOptions: { header: null } }
});
希望有帮助。
答案 8 :(得分:4)
如果有人在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,
});
答案 9 :(得分:4)
使用
static navigationOptions = { header: null }
中的类/组件中的
class Login extends Component {
static navigationOptions = {
header: null
}
}
答案 10 :(得分:3)
我使用的是header : null
而不是header : { visible : true }
,我使用的是react-native cli。这是示例:
static navigationOptions = {
header : null
};
答案 11 :(得分:3)
这适用于堆栈导航
<Stack.Screen
name="Home"
component={HomeComponent}
options={{
headerShown: false,
}}
/>
答案 12 :(得分:3)
在反应导航5.x 中,您可以通过将headerMode
的{{1}}属性设置为Navigator
来隐藏所有屏幕的标题。
false
答案 13 :(得分:2)
这对我有用:
const Routes = createStackNavigator({
Intro: {
screen: Intro,
navigationOptions: {
header: null,
}
}
},
{
initialRouteName: 'Intro',
}
);
答案 14 :(得分:2)
您可以这样隐藏StackNavigator标头:
calloc
答案 15 :(得分:2)
如果您只想将其从react-native-navigation
的一个屏幕中删除,则:
<Stack.Navigator>
<Stack.Screen
name="Login"
component={Login}
options= {{headerShown: false}} />
</Stack.Navigator>
答案 16 :(得分:2)
<Stack.Screen
name="SignInScreen"
component={Screens.SignInScreen}
options={{ headerShown: false }}
/>
options={{ headerShown: false }}
对我有用。
** "@react-navigation/native": "^5.0.7",
"@react-navigation/stack": "^5.0.8",
答案 17 :(得分:1)
const MyNavigator = createStackNavigator({
FirstPage: {screen : FirstPageContainer, navigationOptions: { headerShown:false } },
SecondPage: {screen : SecondPageContainer, navigationOptions: { headerShown: false } }
});
//header:null will be removed from upcoming versions
答案 18 :(得分:1)
在目标屏幕中,您必须对此进行编码!
MongoDB extension version 1.2.9
MongoDB extension stability stable
libbson bundled version 1.5.5
libmongoc bundled version 1.5.5
答案 19 :(得分:1)
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,
};
答案 20 :(得分:1)
在最新版本的react-navigation中,它可以在每个屏幕上隐藏标题:headerMode = {'none'}
<Stack.Navigator
headerMode={'none'}
>
<Stack.Screen name="Home" component={HomeScreen}/>
<Stack.Screen name="Details" component={DetailsScreen}/>
</Stack.Navigator>
答案 21 :(得分:1)
这将从组件类中删除标题。
export default class SampleClass extends Component {
navigationOptions = {
headerMode: 'none'
}
...
}
答案 22 :(得分:1)
对我来说navigationOptions
无效。以下对我有用。
<Stack.Screen name="Login" component={Login}
options={{
headerShown: false
}}
/>
答案 23 :(得分:0)
我遇到了同样的问题,但是我已经使用number = int(input("Enter a number between 0 and 1000: "))
while number in range (0, 1000):
if number %2 == 0:
print("The number you entered is even.")
if number != 0:
print("The number you entered is odd.")
else:
print("You entered an invalid number.")
在各个类中完成了标头工作,并且正在使用function sayHi() {
var txtName = document.getElementById("txtName");
var divOutput = document.getElementById("divOutput");
var name = txtName.value;
divOutput.innerHTML = "<em>" + name + "</em> is a very nice name.";
// divOutput.innerHTML = "is a very nice name.";
}
,其标头可见,而类的标头不可见。我已经尝试过诸如navigationOptions
,createBottomTabNavigator
之类的所有方法,但是无法隐藏headerMode: none
的标题。
答案 24 :(得分:0)
所有答案都显示了如何使用类组件,但是对于功能组件,您可以这样做:
#c
如果您删除标题,则组件可能位于看不见的地方(当手机没有方形屏幕时),因此删除标题时使用它很重要。
答案 25 :(得分:0)
将您正在使用的反应导航库的版本与解决方案进行匹配非常重要,因为它们都不同。对于像我这样由于某种原因仍在使用react-navigation v1.0.0的用户,这两种方法都有效:
在各个屏幕上禁用/隐藏标题:
const AppScreens = StackNavigator(
{
Main: { screen: Main, navigationOptions: { header: null } },
Login: { screen: Login },
Profile: { screen: Profile, navigationOptions: { header: null } },
});
要一次禁用/隐藏所有屏幕,请使用以下方法:
const AppScreens = StackNavigator(
{
Main: { screen: Main},
Login: { screen: Login },
Profile: { screen: Profile },
},
{
headerMode: 'none',
}
);
答案 26 :(得分:0)
对于单个屏幕,您可以像这样在createStackNavigator中设置 header:null 或 headerShown:false
const App = createStackNavigator({
First: {
screen: Home,
navigationOptions: {
header: null,
},
},
});
使用defaultNavigationOptions一次隐藏所有屏幕的标题
const App = createStackNavigator({
First: {
screen: HomeActivity,
},
},
{
defaultNavigationOptions: {
header: null
},
});
答案 27 :(得分:0)
如果要从所有屏幕转到app.js删除标题并将此代码添加到Stack.Navigator
screenOptions={ { headerShown: false } }
答案 28 :(得分:0)
使用最新的react-navigation-stack v4,您可以使用
隐藏标题import { createStackNavigator } from 'react-navigation-stack';
createStackNavigator({
stackName: {
screen:ComponentScreenName,
navigationOptions: {
headerShown:false
}
}
})
答案 29 :(得分:0)
在 V4 上你必须使用这个:
headerLeft: () => { }
这是已弃用:
header: null
答案 30 :(得分:-1)
对于4.x,不推荐使用header: null
,而应使用headerShown: false
例如:
const AppScreens = createStackNavigator({
cover: {
screen: Login,
path: '/login',
navigationOptions: () => ({
headerShown: false,
}),
},
})