我试图使用堆栈和选项卡导航器切换屏幕。
const MainNavigation = StackNavigator({
otp: { screen: OTPlogin },
otpverify: { screen: OTPverification},
userVerified: {
screen: TabNavigator({
List: { screen: List },
Settings: { screen: Settings }
}),
},
});
在这种情况下,首先使用堆栈导航器,然后使用制表器。我想从堆栈导航器中隐藏头文件。这是不正常工作时,我使用导航选项::
navigationOptions: { header: { visible: false } }
我试图在前两个组件上使用这段代码在stacknavigator。
如果我使用这一行,然后得到一些错误,如:
从版本5开始更新
从版本5开始,它是screenOptions中的选项headershow
用法示例:
<Stack.Navigator
screenOptions={{
headerShown: false
}}
>
<Stack.Screen name="route-name" component={ScreenComponent} />
</Stack.Navigator>
如果你只想在一个屏幕上隐藏头部,你可以通过在屏幕组件上设置screenOptions来做到这一点,如下所示:
<Stack.Screen options={{headerShown: false}} name="route-name" component={ScreenComponent} />
请参见关于版本5的博客
更新
从版本2.0.0-alpha.36开始(2019-11-07),
有一个新的navigationOption: headershows
navigationOptions: {
headerShown: false,
}
https://reactnavigation.org/docs/stack-navigator#headershown
https://github.com/react-navigation/react-navigation/commit/ba6b6ae025de2d586229fa8b09b9dd5732af94bd
旧的答案
我用这个来隐藏堆栈条(注意这是第二个参数的值):
{
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,
}
}
);
如果有人搜索如何切换头文件,那么在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,
});
如果你使用反应导航版本:6。X可以这样用。在这里,SignInScreen头将隐藏下面的代码片段
options={{
headerShown: false,
}}
完整的脚本应该是
import {createStackNavigator} from '@react-navigation/stack';
import SignInScreen from '../screens/SignInscreen';
import SignUpScreen from '../screens/SignUpScreen';
const Stack = createStackNavigator();
function MyStack() {
return (
<Stack.Navigator>
<Stack.Screen
name="Sing In"
component={SignInScreen}
options={{
headerShown: false,
}}
/>
<Stack.Screen name="Sing Up" component={SignUpScreen} />
</Stack.Navigator>
);
}
export default function LoginFlowNavigator() {
return <MyStack />;
}