React Native如何点击按钮切换加载指定分类的GitHub JSON新闻数据

没问题，我来帮你搞定这个需求！要实现点击按钮切换分类并更新新闻列表，核心是保存完整的分类数据到状态中，然后通过修改rowNo来动态切换对应的新闻数据源，具体步骤如下：

1. 初始化状态时补充必要字段 #

首先要在组件的state里保存完整的分类数据（categoryData），这样切换分类时不用重新请求接口：

constructor(props) {
  super(props);
  this.state = {
    isLoading: true,
    rowNo: 0, // 默认选中第一个分类
    categoryData: [], // 保存完整的分类数据
    dataNews: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}),
    // 其他原有状态字段（比如newsTitle、newsDetails）...
  };
}

2. 修改componentDidMount保存完整数据 #

在接口请求成功后，把整个responseJson.Cat保存到categoryData中，而不是只处理当前分类的新闻：

componentDidMount() {
  return fetch('https://raw.githubusercontent.com/mudassir21/server/master/newsCategory.json')
    .then((response) => response.json())
    .then((responseJson) => {
      const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
      this.setState({
        isLoading: false,
        categoryData: responseJson.Cat, // 保存完整分类数据
        dataNews: ds.cloneWithRows(responseJson.Cat[0].news) // 初始加载第一个分类的新闻
      });
    })
    .catch((error) => {
      console.error(error);
    });
}

3. 创建分类切换的处理方法 #

写一个方法来处理按钮点击事件，更新rowNo并同步切换对应的新闻数据源，同时要做边界判断避免数组越界：

handleCategoryChange = (newRowNo) => {
  const { categoryData } = this.state;
  // 确保新的rowNo在合法范围内（0到分类总数-1）
  if (newRowNo >= 0 && newRowNo < categoryData.length) {
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.setState({
      rowNo: newRowNo,
      // 兜底处理：如果分类没有news数组，用空数组避免报错
      dataNews: ds.cloneWithRows(categoryData[newRowNo].news || [])
    });
  }
};

4. 添加切换按钮 #

在你的布局中添加按钮，调用上面的方法。这里提供两种常见的切换方式：

方式1：前后切换按钮 #

适合分类数量较多的场景：

// 在render方法的合适位置添加按钮组
<View style={{flexDirection: 'row', justifyContent: 'space-around', marginVertical: 10}}>
  <Button
    title="上一个分类"
    onPress={() => this.handleCategoryChange(this.state.rowNo - 1)}
    disabled={this.state.rowNo === 0} // 第一个分类时禁用上一个按钮
  />
  <Button
    title="下一个分类"
    onPress={() => this.handleCategoryChange(this.state.rowNo + 1)}
    disabled={this.state.rowNo === this.state.categoryData.length - 1} // 最后一个分类时禁用下一个按钮
  />
</View>

方式2：分类标签按钮 #

适合分类数量较少的场景，直接展示所有分类：

<View style={{flexDirection: 'row', flexWrap: 'wrap', padding: 10}}>
  {this.state.categoryData.map((cat, index) => (
    <Button
      key={index}
      title={cat.name} // 假设分类对象有name字段，根据你的JSON结构调整
      onPress={() => this.handleCategoryChange(index)}
      style={{marginHorizontal: 5, marginVertical: 5}}
      color={this.state.rowNo === index ? 'blue' : 'gray'} // 高亮当前选中的分类
    />
  ))}
</View>

5. 保持原有ListView不变 #

你原来的ListView代码不需要修改，它会自动监听dataNews的状态变化，重新渲染对应的新闻列表。

额外提示 #

如果你的React Native版本较新，建议考虑使用FlatList替代ListView（ListView已被标记为过时），用法类似，只需要把dataSource换成data属性即可，代码会更简洁。

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