标签: react-navigation-stack

我正在使用React Navigation x5，我正在StackNavigator加载一堆屏幕。unmountOnBlur我想在模糊时卸载一个特定的屏幕组件，以获得与使用DrawerNavigator.

我怎样才能做到这一点？

我正在尝试从 v4 迁移到 v5，他们已经删除了 createAppContainer 并表示要使用 NavigationContainer 来代替它。

我正在使用兼容性层文档中的 createCompatNavigatorFactory 内容。

之前，我将主导航器传递给 createAppContainer，然后使用该组件来包装整个应用程序。

现在文档说只需使用 NavigationContainer，但他们没有说明如何将其应用于使用兼容层的人。

这很令人困惑。我的代码看起来像这样：

const MainNavigator = createStackNavigator(...)
const AppNavigator = createAppNavigator(MainNavigator)

并在 App.js 中

render() {
   <View>
    <AppNavigator ref={navigationRef} />
  </View>
}

现在我已经切换到以下内容：

 const MainNavigator = createCompatNavigatorFactory(createStackNavigator)(...)

并在 App.js 中

render() {
   <View>
    <NavigationContainer ref={navigationRef} />
  </View>
}

我想知道如何将 navigationContainer 连接到 compat navigator 工厂函数制作的内容。我想知道为什么文档中没有任何关于此的内容......

我在我的博览会应用程序中使用 @react-navigation/stack 并且一切正常。我想开始向我的应用程序添加选项卡/抽屉导航，并在尝试导入时不断遇到以下 2 个错误

import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

Attempted import error: 'EasingNode' is not exported from 'react-native-reanimated'.

和

Attempted import error: 'Appearance' is not exported from 'react-native-web/dist/index'.

以下是我的 package.json：

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-native-community/async-storage": "^1.11.0",
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/material-bottom-tabs": "^5.2.16",
    "@react-navigation/material-top-tabs": "^5.2.16",
    "@react-navigation/native": "^5.7.3",
    "@react-navigation/stack": "^5.9.0",
    "@reduxjs/toolkit": "^1.4.0",
    "expo": "~38.0.8", …

开始：

<NavigationContainer>
      <Stack.Navigator>
        {
          isLoading ? <Stack.Screen name="AuthLoadingScreen" component={AuthLoadingScreen} />
          : (
          user ? (
            <Stack.Screen  name="AuthenticatedStack" component={AuthenticatedStack} options={{headerShown: false}} />
            ) : (
              <Stack.Screen  name="NotAuthenticatedStack" component={NotAuthenticatedStack} options={{headerShown: false}} />
            )
          )
        }
      </Stack.Navigator>
    </NavigationContainer>

认证堆栈：

const AuthenticatedStack = () => {
  return (
    <Drawer.Navigator initialRouteName="MainStack" drawerContent={props => <SideBar {...props} />}>
        <Stack.Screen name="MainStack" component={MainStack} options={({route}) => ({
            headerShown: shouldHeaderBeShown(route),title: getHeaderTitle(route),
          })} />
      </Drawer.Navigator>
  );
};

主堆栈包含带有选项卡导航器和其他导航器的主屏幕，我计划从侧面菜单按钮导航到这些导航器：

const MainStack = () => {
  return (
    <Stack.Navigator>
          <Stack.Screen name="main" component={MainTabNavigator} options={({route}) => …

我有以下关注者stack navigator

<Stack.Navigator>
  <Stack.Screen name="Home" component={HomeScreen} />
  <Stack.Screen name="Settings" component={SettingsScreen} />
  <Stack.Screen name="AboutUs" component={AboutUsScreen} />
  <Stack.Screen name="ContactUs" component={ContactUsScreen} />
  <Stack.Screen name="Blog" component={BlogScreen} />
</Stack.Navigator>

我想要drawer（带有自定义抽屉内容）而不使用nesting drawer navigators.

我正在使用嵌套导航。据我所知，根导航器是 aStackNavigator并且 child 是DrawerNavigator无法通过 放置标题栏的DrawerNavigator。所以我通过做到了StackNavigator这一点，但当我导航DrawerNavigator. 如何更新标题标题DrawerScreen

根导航器：

 <Stack.Navigator screenOptions={screenOptions} initialRouteName="Login">
    <Stack.Screen name="Login" component={Login} />
    // ...
    <Stack.Screen // This is the screen that contains a child navigator
      name="Main"
      component={Main}
      options={({navigation}) => ({
        title: 'Main Page',
        headerLeft: () => <MenuIcon stackNavigation={navigation} />,
      })}
    />
  </Stack.Navigator>

儿童导航器：

<Drawer.Navigator>
     //...
      <Drawer.Screen
        name="Bids"
        component={Bids}
        options={{
          title: text.bids, // This updates the title that in the drawer navigator menu not the header …

我试图阻止用户在 React Native 中录制视频时通过 Android 后退按钮或手势返回。根据React Navigation 的文档，它应该使用beforeRemove事件侦听器进行处理。但是返回时该事件永远不会被触发。

我尝试过blur，虽然它被解雇了，但由于此事件没有preventDefault()方法，因此在这种情况下无法使用。

反应导航 - v5.x

反应本机 - 0.63.2

这是我试图实现的屏幕的示例代码

const VideoCapturePage = ({navigation}) => {
  const [isRecording, setIsRecording] = useState(false);

  useEffect(() => {
    navigation.addListener('beforeRemove', (e) => {
      if (!isRecording) {
        return;
      }

      e.preventDefault();

      Alert.alert(
        'Unsaved changes',
        'There are unsaved changes. Please chose what you want.',
        [
          {
            text: 'Go back',
            onPress: () => {
              navigation.dispatch(e.data.action);
            },
          },
          {
            text: 'Cancel',
            onPress: () => {
              console.log('cancelled'); …

我刚刚从 React Native 5.x 迁移到 6.x，现在我的导航堆栈出现了问题。当我在抽屉导航器深处导航几个屏幕，然后按 Android 上的后退按钮（没有尝试过 IOS）时，它会直接带我回到第一个屏幕。我的导航堆栈如下

 <NavigationContainer theme={MyTheme}>
        <Drawer.Navigator
          initialRouteName="NewsFeed"
          drawerContent={(props) => <SideNav {...props} />}
          screenOptions={{ headerShown: true, header: (options) => <TopNav options={options} /> }}
        >
          <Drawer.Screen name="NewsFeed" component={NewsFeedScreen} />
          <Drawer.Screen name="Post" component={PostScreen} />
          <Drawer.Screen name="Users" component={UsersScreen} />
          <Drawer.Screen name="User" component={UserScreen} />
    ...
        </Drawer.Navigator>
      </NavigationContainer> 

我不确定问题是什么，也没有在任何地方找到任何答案。有人说将每个屏幕包裹在堆栈导航器中，其他人则说这是一个坏主意。

在我的应用程序中，我尝试使用React Navigation 的堆栈导航器并headerLargeTitle启用headerTransparent。

我的实现如下所示：

导航器.tsx

<HomeStack.Navigator
  initialRouteName="ScreenA"
  screenOptions={({ navigation, route }) => ({
    title: 'My app',
    headerTransparent: true,
    headerBlurEffect: 'light',
    headerLargeTitleShadowVisible: false,
    headerLargeTitle: true,
    headerSearchBarOptions: {
      autoCapitalize: 'none',
      obscureBackground: false,
    },
  })}
>
  <HomeStack.Screen
    name="ScreenA"
    component={ScreenA}
  />
</HomeStack.Navigator>

屏幕A返回：

const headerHeight = useHeaderHeight();

return (
<>
  {isReady && (
    <ScrollView
      contentInset={{
        top: headerHeight * 2,
      }}
      style={{
        backgroundColor: 'red',
      }}
    >
      <View.Base
        style={{
          height: 900,
          width: '100%',
          backgroundColor: 'yellow',
        }}
      />
    </ScrollView>
  )}
</> …

在我的反应本机应用程序中，我有一个嵌套在抽屉导航器内的堆栈导航器。我希望在堆栈导航器页面中禁用抽屉。我正在使用反应导航 6。

在文档（https://reactnavigation.org/docs/drawer-navigator/#options）中，我看到有两个选项：gestureEnabled\xe2\x80\x8b和swipeEnabled\xe2\x80\x8b。但这些只能用于抽屉式屏幕，不能像我的情况那样用于堆叠式屏幕。

我的代码如下：

const Stack = createNativeStackNavigator<RootStackParamList>();\nconst Drawer = createDrawerNavigator<RootTabParamList>();\n\nconst loginStack = () => (\n  <Stack.Navigator>\n    <Stack.Screen name="LandingScreen" component={LandingScreen} options={{ headerShown: false }} />\n    <Stack.Screen name="LoginScreen" component={LoginScreen} options={{ headerShown: false }} />\n    <Stack.Screen\n      name="RegisterScreen"\n      component={RegisterScreen}\n      options={{ headerShown: false }}\n    />\n  </Stack.Navigator>\n);\n\nreturn (\n  <NavigationContainer>\n    <Drawer.Navigator\n      screenOptions={{\n        drawerStyle: { backgroundColor: \'white\' },\n        drawerPosition: \'right\',\n      }}\n    >\n      {!user ? (\n        <Drawer.Screen\n          name="PublicStack"\n          component={loginStack}\n          // options={{headerShown: false}}\n          options={({ route }) => {\n            const routeName …