我试图使用堆栈和选项卡导航器切换屏幕。
const MainNavigation = StackNavigator({
otp: { screen: OTPlogin },
otpverify: { screen: OTPverification},
userVerified: {
screen: TabNavigator({
List: { screen: List },
Settings: { screen: Settings }
}),
},
});
在这种情况下，首先使用堆栈导航器，然后使用制表器。我想从堆栈导航器中隐藏头文件。这是不正常工作时，我使用导航选项::
navigationOptions: { header: { visible: false } }
我试图在前两个组件上使用这段代码在stacknavigator。 如果我使用这一行，然后得到一些错误，如:
当前回答
你可以像这样隐藏StackNavigator头:
const Stack = createStackNavigator();
function StackScreen() {
return (
<Stack.Navigator
screenOptions={{ headerShown: false }}>
<Stack.Screen name="Login" component={Login} />
<Stack.Screen name="Training" component={Training} />
<Stack.Screen name="Course" component={Course} />
<Stack.Screen name="Signup" component={Signup} />
</Stack.Navigator>
);
}
其他回答
所有的答案都展示了如何用类组件来实现，但是对于功能组件你需要做:
const MyComponent = () => {
return (
<SafeAreaView>
<Text>MyComponent</Text>
</SafeAreaView>
)
}
MyComponent.navigationOptions = ({ /*navigation*/ }) => {
return {
header: null
}
}
如果你删除了头部，你的组件可能在你看不到的地方(当手机没有方形屏幕时)，所以在删除头部时使用它是很重要的。
这招对我很管用:
const Routes = createStackNavigator({
Intro: {
screen: Intro,
navigationOptions: {
header: null,
}
}
},
{
initialRouteName: 'Intro',
}
);
如果有人搜索如何切换头文件，那么在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 />;
}
在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 } }
});
希望能有所帮助。
