我试图使用堆栈和选项卡导航器切换屏幕。
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-stack v4，您可以使用它隐藏头文件
import { createStackNavigator } from 'react-navigation-stack';
createStackNavigator({
stackName: {
screen:ComponentScreenName,
navigationOptions: {
headerShown: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 />;
}
如果你想从整个屏幕中删除头部，去app.js并将这段代码添加到Stack中。导航器
screenOptions={ { headerShown: false } }
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()。
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,
};
如果你想隐藏在特定的屏幕上，可以这样做:
// create a component
export default class Login extends Component<{}> {
static navigationOptions = { header: null };
}
