我试图使用堆栈和选项卡导航器切换屏幕。
const MainNavigation = StackNavigator({
otp: { screen: OTPlogin },
otpverify: { screen: OTPverification},
userVerified: {
screen: TabNavigator({
List: { screen: List },
Settings: { screen: Settings }
}),
},
});
在这种情况下，首先使用堆栈导航器，然后使用制表器。我想从堆栈导航器中隐藏头文件。这是不正常工作时，我使用导航选项::
navigationOptions: { header: { visible: false } }
我试图在前两个组件上使用这段代码在stacknavigator。 如果我使用这一行，然后得到一些错误，如:
当前回答
在react-navigation的最新版本中，这可以在每个屏幕上隐藏标题:
<堆栈。领航员 headerMode ={“郎”} > <堆栈。屏幕 <堆栈。屏幕名 < /堆栈。领航员>
其他回答
在你的目标屏幕上，你必须编写这样的代码!
static navigationOptions = ({ navigation }) => {
return {
header: null
}
}
v6
headerMode道具已从react导航6.x中移除。现在我们可以使用headershows选项来实现相同的结果。
<Stack.Navigator screenOptions={{ headerShown: false }}>
{/* Your screens */}
</Stack.Navigator>
v5
在react导航5。你可以通过将Navigator的headerMode道具设置为false来隐藏所有屏幕的头部。
<Stack.Navigator headerMode={false}>
{/* Your screens */}
</Stack.Navigator>
你只能在新的更新版本(react- navigation版本6)中使用headerperformed:false
import { createStackNavigator } from '@react-navigation/stack';
const Util = createStackNavigator();
const UtilStack = () =>{
return(
<Util.Navigator>
<Util.Screen name='Splash' component={Splash} options={{ headerShown: false }}/>
)
<Util.Navigator>
}
在v4上，只需在想要隐藏标题的页面中使用下面的代码
export default class Login extends Component {
static navigationOptions = {
header: null
}
}
参考堆栈导航器
/*...*/
import { createNativeStackNavigator } from "@react-navigation/native-stack";
/*...*/
const {Navigator, Screen } =createNativeStackNavigator();
export function AuthRoutes(){
return (
<Navigator
screenOptions={
{
contentStyle:{
backgroundColor: 'transparent'
},
headerShown: false
}
}
>
</Navigator>
)
}
