如何在React Native测验应用的Header组件中渲染不同分类

嘿，你的Header组件写得挺整洁的！要把不同分类内容渲染进去其实很简单，核心就是利用组件的 props 动态传递内容，下面给你几种实用的实现方式：

你的Header组件已经通过 props.headerText 接收文本内容了，所以在父组件里使用时，只需要传入不同的分类名称即可。比如你有「数学测验」「历史测验」这类分类：

import Header from './Header';

// 假设这是你的测验分类列表
const quizCategories = ['数学测验', '历史测验', '科学测验'];

const ParentComponent = () => {
  return (
    <View>
      {/* 渲染单个分类的Header */}
      <Header headerText={quizCategories[0]} />
      
      {/* 批量渲染所有分类的Header（比如做分类列表页） */}
      {quizCategories.map((category, index) => (
        <Header key={index} headerText={category} />
      ))}
    </View>
  );
};

这样每次传入不同的 headerText，Header组件就会自动渲染对应的分类内容了。

如果你的分类不只是纯文本，还需要展示图标、自定义文字颜色等信息，可以扩展Header组件的props来支持这些需求：

首先修改Header组件：

import React from 'react';
import { Text, View, Image } from 'react-native';

const Header = (props) => {
  const { textStyle, viewStyle, iconStyle } = styles;
  return (
    <View style={viewStyle}>
      {/* 可选：渲染分类图标 */}
      {props.categoryIcon && (
        <Image source={props.categoryIcon} style={iconStyle} />
      )}
      {/* 支持自定义文本颜色 */}
      <Text style={[textStyle, { color: props.textColor || '#000' }]}>
        {props.headerText}
      </Text>
    </View>
  );
};

const styles = {
  viewStyle: {
    backgroundColor: '#F8F8F8',
    padding: 16,
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  textStyle: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  iconStyle: {
    width: 24,
    height: 24,
  },
};

export default Header;

然后在父组件里传递完整的分类对象：

const quizCategories = [
  { 
    name: '数学测验', 
    icon: require('../assets/math-icon.png'), 
    textColor: '#2196F3' 
  },
  { 
    name: '历史测验', 
    icon: require('../assets/history-icon.png'), 
    textColor: '#FF9800' 
  },
];

const ParentComponent = () => {
  return (
    <View>
      {quizCategories.map((category, index) => (
        <Header
          key={index}
          headerText={category.name}
          categoryIcon={category.icon}
          textColor={category.textColor}
        />
      ))}
    </View>
  );
};

如果你的分类数据是从API获取的，或者需要在全局状态中管理，可以用React的 useState + useEffect 或者状态管理工具（比如Context、Redux）来动态获取并渲染：

import { useState, useEffect } from 'react';
import Header from './Header';

const ParentComponent = () => {
  const [categories, setCategories] = useState([]);

  // 模拟从API获取分类数据
  useEffect(() => {
    const fetchCategories = async () => {
      try {
        // 替换成你的实际API地址
        const response = await fetch('https://your-api-url/quiz-categories');
        const data = await response.json();
        setCategories(data);
      } catch (error) {
        console.error('获取分类失败:', error);
      }
    };

    fetchCategories();
  }, []);

  return (
    <View>
      {categories.map((category) => (
        <Header key={category.id} headerText={category.name} />
      ))}
    </View>
  );
};

说白了，核心思路就是让Header组件成为一个可复用的“容器”，通过props接收外部传入的分类内容，这样就能灵活适配不同的分类场景啦！

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