reactjs - 从 React-Native-Navigation v2 中删除导航栏？

Question

如何在 React-Nativa-Navigation V2 中禁用特定屏幕的导航栏？

Answer 1

Your best option will be setting static options inside your component:

export default class YourComponent extends Component {
  static get options() {
    return {
      topBar: {
        visible: false,
        animate: false
      }
    };
  }
}

Notice that you can toggle the topBar visibility change animation.

Answer 2

对于未显示顶部栏的特定组件，可以通过放置

topBar: {  visible: false }

options像component这样_

Navigation.setRoot({
      root: {
        stack: {
          id: "App",
          children: [
            {
              component: {
                name: "rci.Login",
                options: {
                  topBar: {
                    visible: false
                  }
                }
              }
            }
          ]
        }
      }
    });

而且，如果需要在堆栈级别设置它以便堆栈中没有屏幕显示顶部栏，我们可以通过设置来做到这一点

 options: {
    topBar: {
      visible: false
    }
  },

堆栈内。整个代码看起来像

Navigation.setRoot({
root: {
 stack: {
  options: {
    topBar: {
      visible: false
    }
  },
  children: [
    {
      component: {
        name: 'navigation.playground.TextScreen',
        passProps: {
          text: 'This is tab 1',
          myFunction: () => 'Hello from a function!',
        }
      }
    },
    {
      component: {
        name: 'navigation.playground.TextScreen',
        passProps: {
          text: 'This is tab 2',
        }
      }
    }
   ]
  }
 }
});

Answer 3

如果您使用的是StackNavigator，则需要在给定屏幕上设置header为：null

class HomeScreen extends React.Component {
  static navigationOptions = {
    header: null,
  };

  ...
}

export default createStackNavigator({
  Home: HomeScreen
});

Answer 4

希望这可以帮助。正确的做法@react-navigation/native 5.1.3似乎是这样headerShown: false

<NavigationContainer>
  <Stack.Navigator initialRouteName="Login">
    <Stack.Screen
      name="Login"
      component={LoginScreen}
      options={{ title: "Login Screen", headerShown: false }}
    />
    {..other stuff..}
  </Stack.Navigator>
</NavigationContainer>