如何在TypeScript环境下构建React Native导航，实现列表项到WebView页面的属性传递

我来一步步帮你搞定这个导航传参的问题，你的场景用Stack Navigator完全合适——毕竟是从列表页跳转到详情页的层级导航，返回逻辑也能天然适配，下面是具体的修正步骤：

1. 先修正Stack.Screen的组件配置错误 #

你当前的GuidanceNavigation.tsx里，Stack.Screen的component属性传了字符串，这是不对的，应该直接传入组件本身：

// GuidanceNavigation.tsx
import { NavigationItems } from './NavigationItems';
import { InstructionView } from './InstructionView';

const Stack = createStackNavigator();
export class GuidanceNavigation extends React.Component<{}, {}> {
  render(): JSX.Element {
    return (
      <SafeAreaView style={styles.container} >
        <NavigationContainer>
          <Stack.Navigator>
            {/* 把字符串换成组件引用 */}
            <Stack.Screen name="Choose a topic" component={NavigationItems} />
            <Stack.Screen name="Instructions" component={InstructionView} />
          </Stack.Navigator>
        </NavigationContainer>
      </SafeAreaView>
    );
  };
}

2. 定义Stack导航的参数类型（TypeScript核心） #

要让TypeScript识别导航参数，我们需要给Stack定义一个参数类型映射，这样不管是跳转还是接收参数都有严格的类型提示：

// NavigationTypes.ts
export interface IFileLink {
  title: string;
  file: string;
}

// 新增Stack参数类型，指定每个页面的参数要求
export type RootStackParamList = {
  "Choose a topic": undefined; // 列表页不需要传入参数
  Instructions: IFileLink; // 详情页需要接收IFileLink类型的参数
};

接着用这个类型创建类型化的Stack Navigator：

// GuidanceNavigation.tsx
import { createStackNavigator } from '@react-navigation/stack';
import { RootStackParamList } from './NavigationTypes';

// 传入类型参数，让Stack具备类型感知
const Stack = createStackNavigator<RootStackParamList>();

3. 给NavigationItems组件添加导航Props类型 #

React Navigation会自动给屏幕组件传递navigation和route props，我们需要给NavigationItems定义正确的props类型，才能合法访问navigation对象：

// NavigationItems.tsx
import { StackNavigationProp } from '@react-navigation/stack';
import { RootStackParamList, IFileLink } from './NavigationTypes';

// 定义当前页面的导航props类型
type NavigationItemsProps = {
  navigation: StackNavigationProp<RootStackParamList, "Choose a topic">;
};

export class NavigationItems extends React.Component<NavigationItemsProps, {}> {
  // 你的原有item数据、itemList方法保持不变

  navigateToFile(link: IFileLink) {
    console.log("Navigation to "+link.title);
    // 现在可以正确访问this.props.navigation了
    this.props.navigation.navigate('Instructions', link);
  };

  // 你的item方法、render方法保持不变
}

4. 修正InstructionView组件的参数接收方式 #

你之前直接把IFileLink作为组件props的写法是错误的——React Navigation的参数是放在route.params里的，我们需要给InstructionView定义正确的props类型：

// InstructionView.tsx
import { RouteProp } from '@react-navigation/native';
import { RootStackParamList } from './NavigationTypes';

// 定义当前页面的路由props类型
type InstructionViewProps = {
  route: RouteProp<RootStackParamList, "Instructions">;
};

export class InstructionView extends React.Component<InstructionViewProps> {
  render(): JSX.Element {
    // 从route.params里获取传递的参数
    const { file } = this.props.route.params;
    return (
      <WebView source={{ uri: file }} />
    );
  }
}

额外说明 #

• 关于Stack Navigator的适用性：你的场景是典型的"列表-详情"层级导航，Stack Navigator完全适配，用户可以通过系统返回按钮或者自定义返回逻辑回到列表页，完全符合需求。
• TypeScript导航类型的作用：我们定义的RootStackParamList相当于一个"契约"，告诉TypeScript每个页面的参数要求，这样在调用navigation.navigate时如果参数类型不对，TypeScript会直接报错，提前避免运行时错误。

这样修改之后，你点击列表项就能正确跳转到InstructionView，并且传递对应的标题和文件路径了。

内容的提问来源于stack exchange，提问作者glenatron