标签: react-navigation-v5

我正在像这样设置导航容器的主题

import {
  NavigationContainer,
  DefaultTheme,
  DarkTheme,
} from "@react-navigation/native";

export default function Navigation() {
  const colorScheme = useColorScheme();
  return (
    <NavigationContainer
      linking={LinkingConfiguration}
      theme={colorScheme === "dark" ? DarkTheme : DefaultTheme}
    >
      <RootNavigator />
    </NavigationContainer>
  );
}

我有一个堆栈导航器，在堆栈导航器内我有一个抽屉式导航器，如下所示：

// Root Navigator
export default function RootNavigator() {
  return (
    <Stack.Navigator id="root-navigation-navigator" initialRouteName={initialRouteName}>
      <Stack.Screen
        name="Root"
        component={DrawerNavigator}
        options={{
          headerShown: false,
        }}
      />
      {/* Other Screens */}
    </Stack.Navigator>
  );
}

// Drawer Navigator
export default function DrawerNavigator(props) {
  return (
    <Drawer.Navigator
      initialRouteName="UserSettings"
      drawerContent={(props) => <CustomDrawerContent {...props} …

我的应用程序有一个 TabNavigator，每个选项卡中都有一个 StackNavigator。通过单击不同的选项卡在堆栈之间导航时，我不会重置堆栈，因此当您更改选项卡时，堆栈包含以前的状态。但是，偶尔从一个选项卡中的屏幕中，我想导航到不同选项卡中的特定屏幕，在这种情况下，我想重置目标选项卡中的堆栈。

TabNavigator
    Tab1 
      StackNavigator
         - ScreenA
         - ScreenB
    Tab2
      StackNavigator
         - Screen1
         - Screen2

我希望能够在 Screen2 上放置一个按钮来重置 Tab1 上的堆栈。

我想知道此处文档中提到的“目标”参数是否有帮助，但没有关于如何使用它的示例。https://reactnavigation.org/docs/navigation-actions/

（我在这里搜索过，但为 4.x 建议的答案似乎不再适用）。谢谢！

反应导航 5

我在 TabNavigator 内部构建了一个 StackNavigator，并且主屏幕和其他屏幕之间的导航正在工作。但问题是，当我从 Tab2 移动到 Tab1 时，我希望 Tab1 总是显示我 StackNavigator 的第一个屏幕。

tab1
   -> Stack
        -screen1
        -screen2
tab2

我在 screen2 上，然后移到 tab2 然后我移回 Tab1 我想总是显示 screen1。

我尝试使用

OnTabPress({navigation})=>{
    navigation.navigate("stackName",{
     screen: "screen1"
   }).
}

它的工作，但它首先显示我 screen2 然后导航到 screen1。有没有其他解决方案。 https://snack.expo.io/@usamasomy/groaning-donut

有两组堆栈导航器；

const SetOneScreens = () => (
  <Stack.Navigator initialRouteName="AScreen">
    <Stack.Screen name="AScreen" component={AScreen} />
    <Stack.Screen name="BScreen" component={BScreen} />
  </Stack.Navigator>
);
const SetTwoScreens = () => (
  <Stack.Navigator initialRouteName="CScreen">
    <Stack.Screen name="CScreen" component={CScreen} />
    <Stack.Screen name="DScreen" component={DScreen} />
  </Stack.Navigator>
);

哪些嵌套在抽屉导航器中

    <NavigationContainer>
      <Drawer.Navigator initialRouteName="SetOneScreens">
        <Drawer.Screen name="SetOneScreens" component={SetOneScreens} />
        <Drawer.Screen name="SetTwoScreens" component={SetTwoScreens} options={{swipeEnabled: false}} />
      </Drawer.Navigator>
    </NavigationContainer>

我想从导航BScreen到DScreen并重置堆栈（为了不让android中的硬件后退按钮返回BScreen）

在嵌套的情况下，我们应该首先定义导航器名称；我应该如何在重置操作中定义屏幕。

// For navigation 
props.navigation.navigate('setTwoScreens',{screen:'DScreen'})

// For reset I can only navigate to initial screen 
props.navigation.reset({index:0,routes:[{name:'setTwoScreens'}]})

我应该如何处理resetwithnavigation …

我动态设置了“headerShown”屏幕选项，但我无法弄清楚如何从功能组件中读取选项

<Stack.Navigator
    screenOptions={{
      headerShown: showHeader
}}>

我已经分别使用 useNavigation、useRoute 和 useNavigationState 尝试了组件内的导航、路由和状态对象，但似乎没有一种方法可以获取屏幕选项值。

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

我怎样才能做到这一点？

我正在尝试将initialParam 属性传递到TabNavigator 屏幕。它旨在成为本地状态的登录部分，只是进行概念验证。它在堆栈导航器屏幕上运行良好，但route.params选项卡屏幕上的 未定义。我究竟做错了什么？

另外，我很确定就状态管理而言，这必须改变，但我想确保我可以简单地更改父级中的状态App并使其生效。它在堆栈屏幕上工作，这意味着我可以调用它setLoggedIn(true)，它将带我到选项卡导航器。但我已经回不去了...

const Track = () => {
  return (
    <TrackStack.Navigator>
      <TrackStack.Screen
        name='TrackListScreen'
        component={TrackListScreen}
      />
      <TrackStack.Screen
        name='TrackDetailScreen'
        component={TrackDetailScreen}
      />
    </TrackStack.Navigator>
  );
};

const App = () => {
  const [loggedIn, setLoggedIn] = useState(false);

  return (
    <NavigationContainer>
      {loggedIn ? //is logged in 
        (
          <MainTab.Navigator>
            <MainTab.Screen
              name='TrackCreateScreen'
              component={TrackCreateScreen}
              initialParams={{ setLoggedIn }}
            />
            <MainTab.Screen
              name='AccountScreen'
              component={AccountScreen}
            />
            <MainTab.Screen
              name='Track'
              component={Track}
            />
          </MainTab.Navigator>
        ) : (
          <LoginStack.Navigator>
            <LoginStack.Screen
              name='SignupScreen'
              component={SignupScreen}
              initialParams={{ setLoggedIn }}
            />
            <LoginStack.Screen …

我在我的react-native项目中使用React Navigation v5。

我有一个嵌套的堆栈导航器。

父堆栈导航器MyParentFlow有一个托管另一个堆栈导航器的屏幕组件：

const MyParentFlow = ({route, navigation}) => {

   const MyStack = createStackNavigator();

  return (
    <MyStack.Navigator
       initialRouteName={...}
       ...>
       {/*HERE is the nested children stack navigator*/}
       <MyStack.Screen
         name={FLOWS.MyChildrenFlow}
         component={MyChildrenFlow}
       />
       <MyStack.Screen .../>
       ...
    </MyStack.Navigator>
)
}

我的嵌套堆栈导航器MyChildrenFlow：

const MyChildrenFlow = ({route, navigation}) => {

   const MyStack = createStackNavigator();


  return (
    <MyStack.Navigator
       initialRouteName={...}
       ...>
       {/*HERE is a child screen in the nested navigator*/}
       <MyStack.Screen 
         name="MyChildScreen"
         component={MyChildScreen}
       />
       <MyStack.Screen .../>
       ...
    </MyStack.Navigator>
)
}

在嵌套堆栈导航器托管的子屏幕中：

const …

我试图隐藏标签。并且showLabel: false不工作。

import React, {useLayoutEffect} from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import {useNavigation} from '@react-navigation/native';

import HomeTopTabNavigator from '../routes/home.top.tab';
import {NAVIGATOR} from '../constants/screen.constants';
import THEME from '../constants/theme.constants';
import Icon from '../components/atoms/Icon';

const HomeStack = createStackNavigator();

function HomeStackNavigator() {
  const navigation = useNavigation();

  useLayoutEffect(() => {
    navigation.setOptions({
      showLabel: false,
      tabBarIcon: () => (
        <Icon
          type="MaterialCommunityIcons"
          name="home"
          size={24}
          color={THEME.PRIMARY}
        />
      ),
    });
  }, [navigation]);

  return (
    <HomeStack.Navigator
      screenOptions={{headerStyle: {elevation: 0, shadowOpacity: 0}}}>
      <HomeStack.Screen
        name={NAVIGATOR.HomeTopTab}
        component={HomeTopTabNavigator}
      />
    </HomeStack.Navigator>
  );
}

export …

有什么方法可以访问组件options内的导航器屏幕对象Home吗？

    <Stack.Navigator>
        <Stack.Screen
            name="Home"
            component={Home}
            options={
                {
                    /** some options... */
                }
            }
        />
        <Stack.Screen name="About" component={About} />
    </Stack.Navigator>

家

function Home() {
    /** Get options object here */
    return (
        /** some jsx */
    );
}

我正在使用反应导航5