React Native如何根据JSON的type属性设置不同文本字体样式

核心思路就是在你的ItemRender组件里，根据传入item的type属性，动态匹配对应的样式。具体实现步骤如下：

1. 定义两种差异化样式 #

用StyleSheet.create分别定义标题（title）和普通条目（entry）的样式：

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

const styles = StyleSheet.create({
  titleText: {
    fontSize: 18,
    fontWeight: 'bold',
    marginVertical: 8,
    color: '#2d2d2d'
  },
  entryText: {
    fontSize: 14,
    marginVertical: 4,
    color: '#555'
  }
});

2. 修改ItemRender组件实现动态样式切换 #

在组件内部通过条件判断，根据item的type选择对应的样式，这里用三元表达式简洁实现：

const ItemRender = ({ item }) => {
  // 根据type字段匹配样式，替换成你实际的内容字段名（比如name/text）
  const targetStyle = item.type === 'title' ? styles.titleText : styles.entryText;

  return (
    <View style={{ paddingHorizontal: 16 }}>
      <Text style={targetStyle}>{item.content}</Text>
    </View>
  );
};

如果后续需要新增更多类型的样式，只需要在StyleSheet里添加新样式，再扩展条件判断即可。

3. 保持FlatList原有调用逻辑 #

你的FlatList部分无需改动，正常传入数据源和渲染组件即可：

<FlatList
  data={yourLunchData} // 这里是你fetch到并解析后的午餐数据
  renderItem={ItemRender}
  keyExtractor={(item) => item.id} // 替换成你数据里的唯一标识字段
/>

这样就能实现：type为title的文本会应用大号加粗样式，entry类文本使用普通样式。

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