react-native:如何在createStackNavigator中隐藏元素

塞布

我的配置中的菜单中显示了一个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

我想隐藏菜单的元素。因为可以通过按钮访问页面/视图。我检查了许多配置createStackNavigatorheaderBackTitleVisible和其他人无效。

您是否知道隐藏元素的原因,因为我迷路了:(?

谢谢

更多泡沫

看看这个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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在react-native中隐藏顶部导航栏?

来自分类Dev

React Native中的CreateStackNavigator返回null

来自分类Dev

在React Native中如何在WebView中隐藏键盘工具栏(InputAccessoryView)?(iOS)

来自分类常见问题

如何在React中隐藏API密钥?

来自分类Dev

如何在带有React Native的Android中隐藏状态栏?

来自分类Dev

如何在React Native Navigation V5的标签栏中隐藏标签?

来自分类Dev

如何在react-native中按下textinput时隐藏图像

来自分类Dev

如何在React Native中3秒后隐藏顶部栏

来自分类Dev

如何在React Native中3秒后隐藏顶部栏

来自分类Dev

如何在react-native中按下textinput时隐藏图像

来自分类Dev

如何在React-Native中隐藏Picker选择手柄

来自分类Dev

如何在 react-native-collapsible 中隐藏手风琴内容

来自分类Dev

如何在React Native上动态隐藏TabNavigator

来自分类Dev

React Native在React Native iOS Android中创建省略号剪切的文本或如何在React native中使多余的文本用点隐藏

来自分类Dev

如何隐藏React Native NavigationBar

来自分类Dev

React Native中的隐藏TextInput

来自分类Dev

如何在React Native中为ListView中的每个元素绑定功能?

来自分类Dev

如何在React Native中安装React Native Maps?

来自分类Dev

如何在一种方法中触发多个视图元素(React Native JS)

来自分类Dev

我如何在加载数据时在 react-native FlatList 中渲染 isLoading 元素

来自分类Dev

如何在React Native中优化图像

来自分类常见问题

如何在React Native中禁用旋转?

来自分类Dev

如何在React Native中渲染对象?

来自分类Dev

如何在React Native中显示图标?

来自分类Dev

如何在React Native中删除警告

来自分类Dev

如何在React Native中传递对象?

来自分类Dev

如何在React Native中刷新屏幕

来自分类Dev

如何在React Native中优化图像

来自分类Dev

如何在 React Native 中缩放图像?

Related 相关文章

  1. 1

    如何在react-native中隐藏顶部导航栏?

  2. 2

    React Native中的CreateStackNavigator返回null

  3. 3

    在React Native中如何在WebView中隐藏键盘工具栏(InputAccessoryView)?(iOS)

  4. 4

    如何在React中隐藏API密钥?

  5. 5

    如何在带有React Native的Android中隐藏状态栏?

  6. 6

    如何在React Native Navigation V5的标签栏中隐藏标签?

  7. 7

    如何在react-native中按下textinput时隐藏图像

  8. 8

    如何在React Native中3秒后隐藏顶部栏

  9. 9

    如何在React Native中3秒后隐藏顶部栏

  10. 10

    如何在react-native中按下textinput时隐藏图像

  11. 11

    如何在React-Native中隐藏Picker选择手柄

  12. 12

    如何在 react-native-collapsible 中隐藏手风琴内容

  13. 13

    如何在React Native上动态隐藏TabNavigator

  14. 14

    React Native在React Native iOS Android中创建省略号剪切的文本或如何在React native中使多余的文本用点隐藏

  15. 15

    如何隐藏React Native NavigationBar

  16. 16

    React Native中的隐藏TextInput

  17. 17

    如何在React Native中为ListView中的每个元素绑定功能?

  18. 18

    如何在React Native中安装React Native Maps?

  19. 19

    如何在一种方法中触发多个视图元素(React Native JS)

  20. 20

    我如何在加载数据时在 react-native FlatList 中渲染 isLoading 元素

  21. 21

    如何在React Native中优化图像

  22. 22

    如何在React Native中禁用旋转?

  23. 23

    如何在React Native中渲染对象?

  24. 24

    如何在React Native中显示图标?

  25. 25

    如何在React Native中删除警告

  26. 26

    如何在React Native中传递对象?

  27. 27

    如何在React Native中刷新屏幕

  28. 28

    如何在React Native中优化图像

  29. 29

    如何在 React Native 中缩放图像?

热门标签

归档