React Native 的 React Navigation 不导航 - 有什么遗漏吗？

Question

这是我第一次尝试使用 React 导航，但我第一次没有成功。我创建了另一个名为 'First' 的屏幕，并这样声明：

types.tsx:

export type RootStackParamList = {
  Root: NavigatorScreenParams<RootTabParamList> | undefined;
  Modal: undefined;
  NotFound: undefined;
  First: undefined;
};

navigation/index.tsx:


import { FontAwesome } from '@expo/vector-icons';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer, DefaultTheme, DarkTheme } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import * as React from 'react';
import { ColorSchemeName, Pressable } from 'react-native';

import Colors from '../constants/Colors';
import useColorScheme from '../hooks/useColorScheme';
import ModalScreen from '../screens/ModalScreen';
import NotFoundScreen from '../screens/NotFoundScreen';
import TabOneScreen from '../screens/TabOneScreen';
import TabTwoScreen from '../screens/TabTwoScreen';
import First from '../screens/FirstScreen'

import { RootStackParamList, RootTabParamList, RootTabScreenProps } from '../types';
import LinkingConfiguration from './LinkingConfiguration';

function RootNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="First" component={First} options={{ headerShown: false}} />
      <Stack.Screen name="Root" component={BottomTabNavigator} options={{ headerShown: false }} />
      <Stack.Screen name="NotFound" component={NotFoundScreen} options={{ title: 'Oops!' }} />
      <Stack.Group screenOptions={{ presentation: 'modal' }}>
        <Stack.Screen name="Modal" component={ModalScreen} />
      </Stack.Group>
    </Stack.Navigator>
  );
}

navigation/LinkingConfiguration.ts:

import { LinkingOptions } from '@react-navigation/native';
import * as Linking from 'expo-linking';

import { RootStackParamList } from '../types';

const linking: LinkingOptions<RootStackParamList> = {
  prefixes: [Linking.makeUrl('/')],
  config: {
    screens: {
      Root: {
        screens: {
          TabOne: {
            screens: {
              TabOneScreen: 'one',
            },
          },
          TabTwo: {
            screens: {
              TabTwoScreen: 'two',
            },
          },
        },
      },
      Modal: 'modal',
      NotFound: '*',
      First: 'first'
    },
  },
};

export default linking;

这就是我尝试导航的方式：

screens/FirstScreen.tsx:

import { useRef, useEffect } from 'react'
import { StatusBar } from 'expo-status-bar';
import { Platform, StyleSheet, Image, Button, Animated, TouchableOpacity } from 'react-native';

import FadeInShrinkView from '../components/FadeInShrinkView';
import Touchable01 from '../components/Touchable01';
import { Text, View } from '../components/Themed';
import Navigation from '../navigation';
import { NavigationContainerRefContext, useNavigation } from '@react-navigation/native';
import { RootStackScreenProps } from '../types';

export default function First() {
  const navigation = useNavigation()

  return (
    <View style={styles.container}>
        <Touchable01
          title='Go Now'
          onTouch={()=>  navigation.navigate('Root')  }
        /> 
    </View>
)
}

在 Expo Go 中进行测试时，它不会导航到“根目录”选项卡。我是不是做错了什么？

Answer 1

我不确定我是否完全理解你的情况。但是我以前遇到过类似的事情。试试这个，如果有效请告诉我。

这是导航到“TabOneScreen”

navigation.navigate('Root', {
    screen: 'TabOne',
    params: {
        screen: 'TabOneScreen',
      },
})

Answer 2

我仍然不知道具体原因，但问题出在我的组件 Touchable01 上。出于任何原因，触摸没有触发“导航”，我不确定它是否期望它来自按钮组件。

无论如何，改变它会导致它起作用。

谢谢大家！

React Native 的 React Navigation 不导航 - 有什么遗漏吗？

React Navigation for React Native not navigating - anything missing?

typescript

react-native

react-navigation