我试图使用堆栈和选项卡导航器切换屏幕。
const MainNavigation = StackNavigator({
otp: { screen: OTPlogin },
otpverify: { screen: OTPverification},
userVerified: {
screen: TabNavigator({
List: { screen: List },
Settings: { screen: Settings }
}),
},
});
在这种情况下，首先使用堆栈导航器，然后使用制表器。我想从堆栈导航器中隐藏头文件。这是不正常工作时，我使用导航选项::
navigationOptions: { header: { visible: false } }
我试图在前两个组件上使用这段代码在stacknavigator。 如果我使用这一行，然后得到一些错误，如:
当前回答
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>
其他回答
在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 } }
});
希望能有所帮助。
如果你使用反应导航版本: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 />;
}
在v4上，只需在想要隐藏标题的页面中使用下面的代码
export default class Login extends Component {
static navigationOptions = {
header: null
}
}
参考堆栈导航器
对于单个屏幕，您可以在createStackNavigator中设置header:null或headershow: false，如下所示 const App = createStackNavigator({ 第一:{ 屏幕:回家, navigationOptions: { 标题:空, }， }， })； 使用defaultNavigationOptions一次从所有屏幕中隐藏头部 const App = createStackNavigator({ 第一:{ 屏幕:HomeActivity, }， }， ｛ defaultNavigationOptions: { 标题:零 }， })；
React原生导航v6.x 2022年5月
在屏幕选项道具中的headershows属性中设置false
<Stack.Navigator initialRouteName="Home">
<Stack.Screen
name="Home"
component={Home}
options={{ headerShown: false }}
/>
</Stack.Navigator>
附: const Stack = createNativeStackNavigator()。
