如何在反应导航 5 中从抽屉中隐藏屏幕 - JavaScript

在 React Navigation 5 中，屏幕可以通过抽屉导航器嵌套来隐藏和显示。以下是如何使用 JavaScript 在 React Navigation 5 中从抽屉中隐藏屏幕的步骤：

步骤

1. 首先，确保你已经安装了 React Navigation 5。如果没有，请先安装，安装方法如下：

npm install @react-navigation/native

或者

yarn add @react-navigation/native

2. 导入必要的库以及创建您的导航器。在这里我们使用StackNavigator作为drawerContentOptions的一个参数。

import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import Screen1 from './Screen1';
import Screen2 from './Screen2';

const Drawer = createDrawerNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Drawer.Navigator
        drawerContentOptions={{
          activeTintColor: '#e91e63',
          itemStyle: { marginVertical: 5 },
        }}
      >
        <Drawer.Screen name="Screen1" component={Screen1} />
        <Drawer.Screen name="Screen2" component={Screen2} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
};

export default App;

3. 然后，在创建抽屉导航时，您可以传入drawerContent参数。drawerContent是自定义组件，可以渲染抽屉的内容。在自定义组件中，可以使用navigation对象来隐藏屏幕。

import React from 'react';
import { View, Text, Button } from 'react-native';

const Screen1 = ({ navigation }) => {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Screen 1</Text>
      <Button title="hide Screen2" onPress={() => navigation.closeDrawer()} />
    </View>
  );
};

export default Screen1;

在这个例子中，我们使用navigation.closeDrawer()方法来关闭抽屉，并隐藏屏幕。closeDrawer方法是navigation对象的一部分，可以直接使用。

在您的应用中，您可以使用任何需要的方法来隐藏屏幕。

结论

完成这些步骤后，您就可以在 React Navigation 5 中使用 JavaScript 从抽屉中隐藏屏幕了。使用自定义组件和导航对象，您可以对导航器的行为进行更多的控制。