如何在React Native的FlatList每个列表项中展示Title和Serial两个标签

问题根因 #

• renderItem方法调用Item组件时仅传入了title字段，未传入Serial字段，导致组件无法获取副标题数据
• 两个展示文本共用同一套样式，无法区分主副标题的视觉层级

修复代码 #

import { StyleSheet, View, Text, TouchableOpacity, FlatList } from 'react-native';

// 数据源保持不变
const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
    Serial: '1254'
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Items',
    Serial: '5678'
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
    Serial: 'XXoX'
  },
];

// Item组件调整文本样式，区分主副标题
const Item = ({ title, Serial }) => (
  <TouchableOpacity style={styles.ttListButton}>
    <View style={styles.TTitem}>
      {/* 主标题用加粗、更大字号的样式 */}
      <Text style={styles.title}>{title}</Text>
      {/* 副标题用更小字号、浅灰色的样式，和主标题区分 */}
      <Text style={styles.subTitle}>{Serial}</Text>
    </View>
  </TouchableOpacity>
);

export default function App() {
  const renderItem = ({ item }) => (
    // 新增Serial字段传递
    <Item title={item.title} Serial={item.Serial} />
  );
  return(
    <View style={{backgroundColor: '#fff', flex:1}}>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </View>
  )
}

// 补充样式参考，可根据需求调整参数
const styles = StyleSheet.create({
  TTitem: {
    paddingVertical: 12,
    paddingHorizontal: 16,
  },
  title: {
    fontSize: 16,
    fontWeight: '500',
    color: '#000',
    marginBottom: 4
  },
  subTitle: {
    fontSize: 14,
    color: '#666'
  },
  ttListButton: {
    backgroundColor: '#fff'
  }
})

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