React Native屏幕间标签导航：基于StackNavigator实现带ID参数跳转

嘿，我来帮你搞定React Native里带ID参数的屏幕跳转问题！基于你给出的FontsTab StackNavigator配置，咱们一步步来实现：

1. 完善Detail屏幕的路由配置 #

首先，咱们得给Detail屏幕加上支持参数的路径，这样不管是内部跳转还是后续的深链接都能正常识别ID参数。修改你的FontsTab配置：

const FontsTab = StackNavigator({
  Home: {
    screen: FontsTabView,
    path: '/',
    navigationOptions: ({ navigation }) => ({
      title: 'Fonts',
      headerLeft: (
        <Icon name="menu" size={30} type="entypo" style={{ paddingLeft: 10 }} onPress={() => navigation.navigate('DrawerOpen')} />
      ),
    }),
  },
  Detail: {
    screen: FontsDetailTabView, // 这里你之前少打了个w，记得补上哦
    path: '/detail/:fontId', // 新增带参数的路径，:fontId是参数占位符
    navigationOptions: ({ navigation }) => ({
      // 可选：根据参数动态设置页面标题
      title: `字体详情 - ${navigation.getParam('fontId', '未知')}`
    })
  }
})

2. 在Home屏幕（FontsTabView）添加带参数的跳转逻辑 #

假设你在FontsTabView里有一个字体列表，点击某个字体项时需要跳转到详情页并传递对应的ID。你可以这样写跳转逻辑：

类组件写法： #

class FontsTabView extends React.Component {
  handleFontPress = (fontId) => {
    // 调用navigation.navigate，第二个参数就是要传递的参数对象
    this.props.navigation.navigate('Detail', { fontId });
  };

  render() {
    return (
      <View>
        {/* 示例：点击文本跳转到详情页，传递对应字体ID */}
        <Text onPress={() => this.handleFontPress('roboto-regular')}>Roboto 常规体</Text>
        <Text onPress={() => this.handleFontPress('open-sans-bold')}>Open Sans 粗体</Text>
      </View>
    );
  }
}

函数组件写法： #

function FontsTabView({ navigation }) {
  const handleFontPress = (fontId) => {
    navigation.navigate('Detail', { fontId });
  };

  return (
    <View>
      <Text onPress={() => handleFontPress('roboto-regular')}>Roboto 常规体</Text>
      <Text onPress={() => handleFontPress('open-sans-bold')}>Open Sans 粗体</Text>
    </View>
  );
}

3. 在Detail屏幕（FontsDetailTabView）接收并使用ID参数 #

现在咱们在详情页里获取传递过来的fontId，就可以用它来加载对应的字体详情了：

类组件写法： #

class FontsDetailTabView extends React.Component {
  render() {
    // 使用getParam方法获取参数，第二个参数是默认值（没传参数时 fallback）
    const fontId = this.props.navigation.getParam('fontId', 'default-font');
    
    return (
      <View style={{ padding: 20 }}>
        <Text style={{ fontSize: 20 }}>当前查看的字体ID：{fontId}</Text>
        {/* 这里可以根据fontId请求数据、渲染字体预览等 */}
      </View>
    );
  }
}

函数组件写法： #

function FontsDetailTabView({ navigation }) {
  const fontId = navigation.getParam('fontId', 'default-font');
  
  return (
    <View style={{ padding: 20 }}>
      <Text style={{ fontSize: 20 }}>当前查看的字体ID：{fontId}</Text>
    </View>
  );
}

这样就完成了带ID参数的屏幕跳转啦！如果后续需要支持深链接直接打开详情页，只需要额外配置Linking模块即可，核心的参数传递和接收逻辑就是上面这些。

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