我的配置中的菜单中显示了一个stackNavigator
const ProfileStack = createStackNavigator();
function ProfileNavigator() {
return (
<ProfileStack.Navigator
drawerStyle={{ width: '100%', color: 'red' }} // not work
>
<ProfileStack.Screen
name="ProfileScreen"
component={ProfileScreen}
options={{
headerBackTitleVisible: false, // not work
headerMode: 'none',
headerShown: true // work
}}
/>
</ProfileStack.Navigator>
)
}
(我在菜单中有个人资料(红色边框)和按钮个人资料(图标),而且我想保留按钮,隐藏在菜单中,并将标题保留在网页/视图中。
我尝试了许多与文档的会议(https://reactnavigation.org/docs/4.x/stack-navigator-1.0#navigationoptions-for-screens-inside-of-the-navigator)
我想隐藏菜单的元素。因为可以通过按钮访问页面/视图。我检查了许多配置createStackNavigator
。headerBackTitleVisible和其他人无效。
您是否知道隐藏元素的原因,因为我迷路了:(?
谢谢
看看这个React Navigation Github问题。想要隐藏抽屉式菜单中项目的发布者,但仍然能够从该页面访问抽屉。提供了以下解决方法:
我发现以下解决方法:
- 创建一个返回null的组件
- 将组件传递到要隐藏该项目的屏幕的抽屉标签导航选项
希望这可以帮助。
下面是一个示例,您可以根据需要复制,粘贴和运行该示例:
App.js:
import React from 'react';
import TestAppContainer from "./TestAppContainer";
export default function App() {
return (
<TestAppContainer/>
);
}
TestAppContainer.js:
import React from "react";
import {NavigationContainer} from "@react-navigation/native";
import {DrawerNavigatorTest} from "./NavigatorTest";
const TestAppContainer = props => {
return (
<NavigationContainer>
<DrawerNavigatorTest />
</NavigationContainer>
);
}
export default TestAppContainer;
NavigatorTest.js:
import React from "react";
import {createDrawerNavigator} from "@react-navigation/drawer";
import TestScreen from "./TestScreen";
import TestScreenTwo from "./TestScreenTwo";
import NullComponent from "./NullComponent";
const TestDrawerNavigator = createDrawerNavigator();
export const DrawerNavigatorTest = () => {
return(
<TestDrawerNavigator.Navigator drawerContentOptions={{activeBackgroundColor: "transparent"}}>
<TestDrawerNavigator.Screen name={"Test"} component={TestScreen} />
<TestDrawerNavigator.Screen name={"Test2"} component={TestScreenTwo} options={{drawerLabel: NullComponent}}/>
</TestDrawerNavigator.Navigator>
);
}
NullComponent.js:
import React from "react";
const NullComponent = props => {
return null;
}
export default NullComponent;
TestScreen.js:
import React from "react";
import {SafeAreaView, View, Text, Button} from "react-native";
const TestScreen = props => {
const buttonPressHandler = () => {
props.navigation.navigate("Test2");
};
return (
<SafeAreaView style={{flex: 1,}}>
<View style={{flex: 1, alignItems: "center", justifyContent: "center"}}>
<Text>Test Screen</Text>
<Button title={"Go to next screen."} onPress={buttonPressHandler} />
</View>
</SafeAreaView>
);
};
export default TestScreen;
TestScreenTwo.js:
import React from "react";
import {SafeAreaView, View, Text} from "react-native";
const TestScreenTwo = props => {
return (
<SafeAreaView style={{flex: 1,}}>
<View style={{flex: 1, alignItems: "center", justifyContent: "center"}}>
<Text>Test Screen Two</Text>
</View>
</SafeAreaView>
);
};
export default TestScreenTwo;
请注意,这不是一个完美的解决方案,而是一种解决方法。它可以使用一些更精细的调整。您可能还需要研究自定义抽屉组件。我对自定义抽屉组件不是很熟悉,但是您可以通过自定义抽屉项目获得更简洁的功能。请参阅React Navigation Docs。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句