如何在Navigator中为不同屏幕传递不同Props？新闻APP分类适配

嘿，你的思路完全正确——复用同一个HomeScreen组件来处理不同分类的新闻，避免冗余代码是非常好的实践！问题出在你尝试直接在路由配置里加props属性，React Navigation并不支持这种写法。这里有两种简单可行的方法来实现你的需求：

方法一：直接通过函数形式传递Props #

你可以把screen字段设置为一个返回HomeScreen组件的箭头函数，直接在组件上传递需要的props。这样组件就能直接拿到你传入的id：

export default createMaterialTopTabNavigator({
  Home: {
    screen: () => <HomeScreen id={1} />,
    navigationOptions: { tabBarLabel: "Home" },
  },
  BeautyScreen: {
    screen: () => <HomeScreen id={2} />,
    navigationOptions: { tabBarLabel: "Beauty tips" },
  },
  BusinessScreen: {
    screen: () => <HomeScreen id={3} />,
    navigationOptions: { tabBarLabel: "Business related" },
  },
  CarsScreen: {
    screen: () => <HomeScreen id={4} />,
    navigationOptions: { tabBarLabel: "Cars related" },
  },
});

在HomeScreen中使用这个props（函数组件示例）：

const HomeScreen = ({ id }) => {
  // 调用API获取对应分类的新闻
  useEffect(() => {
    fetch(`https://some-api.com/?category=${id}`)
      .then(res => res.json())
      .then(data => {
        // 处理数据
      });
  }, [id]);

  return (
    // 你的屏幕UI
  );
};

这种方法的优势是直观直接，适合传递静态的、不需要和导航逻辑绑定的参数。

方法二：利用Navigation Params传递参数 #

另一种方式是在navigationOptions里设置params，然后在组件中通过导航对象获取这些参数。这种方法更符合React Navigation的设计规范，适合需要和导航交互的场景：

export default createMaterialTopTabNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: { 
      tabBarLabel: "Home",
      params: { id: 1 }
    },
  },
  BeautyScreen: {
    screen: HomeScreen,
    navigationOptions: { 
      tabBarLabel: "Beauty tips",
      params: { id: 2 }
    },
  },
  BusinessScreen: {
    screen: HomeScreen,
    navigationOptions: { 
      tabBarLabel: "Business related",
      params: { id: 3 }
    },
  },
  CarsScreen: {
    screen: HomeScreen,
    navigationOptions: { 
      tabBarLabel: "Cars related",
      params: { id: 4 }
    },
  },
});

在HomeScreen中获取参数（函数组件示例）：

const HomeScreen = ({ route }) => {
  const { id } = route.params;

  useEffect(() => {
    fetch(`https://some-api.com/?category=${id}`)
      .then(res => res.json())
      .then(data => {
        // 处理数据
      });
  }, [id]);

  return (
    // 你的屏幕UI
  );
};

如果是类组件，可以通过this.props.navigation.getParam('id')来获取参数。

两种方法都能帮你实现复用组件的目标，你可以根据自己的场景选择：如果只是单纯传递静态分类ID，方法一更简单；如果需要后续通过导航修改参数或者和其他导航逻辑联动，方法二更合适。

内容的提问来源于stack exchange，提问作者Phạm Quang Mẫn