写H5的文本代码 （2022-09-22）

下面是我学习时写的一段代码，主要是给这个List加一个Header，结果编译就报错。

const App = () => {
  const [selectedId, setSelectedId] = useState(null);

  const renderItem = ({ item }) => {
    const backgroundColor = item.id === selectedId ? "#6e3b6e" : "#f9c2ff";

    return (
      <Item
        item={item}
        onPress={() => setSelectedId(item.id)}
        style={{ backgroundColor }}
      />
    );
  };

  const renderHeader = () => {
    return (
      <h1>Header</h1>
    );
  };

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
        ListHeaderComponent={renderHeader}
        extraData={selectedId}
      />
    </SafeAreaView>
  );
};

因为太自然而然的写了H5的代码

<h1>Header</h1>

正确的做法，是将文字包裹在里，将这个Text的style设置成h1的样式。

<Text style={{fontSize: 36, fontWeight: 'bold'}}>Header</Text>