反应导航的反应本机，而不是导航-任何遗漏？

Question

这是我第一次尝试使用react导航，而且我第一次没有让它工作。我创建了另一个名为“First”的屏幕，并声明如下：

types.tsx：

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

导航/索引.

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>
  );
}

导航/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;

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

屏幕/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中进行测试时，它不会导航到根选项卡。我是不是做错了什么？

Answer 1

我仍然不知道为什么，但问题是我的组件Touchable01。由于任何原因，触摸并没有触发“导航”，我不确定它是否希望它来自一个按钮组件。

不管怎样，改变它会让它发挥作用。

谢谢大家！

Answer 2

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

这是导航到'TabOneScreen‘

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