SectionList 的內容從 Web 瀏覽器可見，但在 iOS 中不可見

Question

在構建 SectionList 並用信息填充它時，我在使用 React-Native 時遇到了麻煩。 它似乎在網絡瀏覽器 (Chrome) 上顯示良好，如下所示。

但是，在 iOS 模擬器/設備上查看內容時似乎並非如此。 部分標題確實顯示，但內容不顯示。 這是直接來自我的設備的屏幕截圖。

這是用於每張卡的代碼：

const Card = (props) => {
  return (
    <View>
        <Text style={styles.english}>{props.english}</Text>
        <Text style={styles.other}>{props.other}</Text>
    </View>
    );
}

..這里是 SectionList 的代碼：

export default function App() {
  return (
    <View style={styles.container}>
      <SectionList sections= {[{
          title: "English", data: 
            [
                <Card english="English0" other="Other0"/>,
                <Card english="English1" other="Other1"/>,
                <Card english="English2" other="Other2"/>,
            ]
          }]}
        renderItem={
          ({item}) => <Text style={styles.box}>{item}</Text>
        }
        renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
        keyExtractor={(item, index) => index}
        />
    </View>
  );
}

此外，樣式表：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 5,
    backgroundColor:"#f1faee",
  },
  box: {
    marginBottom: 10,
    padding: 10,
    height: 150,
    width: "95%",
    backgroundColor:"#1d3557",
    borderColor:"#000000",
    shadowOffset:{ width: 3,  height: 3},
    shadowColor: 'black',
    shadowOpacity: 0.4,
    borderRadius: 15,
    justifyContent: "center",
  },
  english: {
    color:"#f1faee",
    fontSize: 30,
  },
  other: {
    color:"#f1faee",
    fontSize: 50,
  },
  sectionHeader: {
    paddingTop: 2,
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom: 2,
    fontSize: 14,
    fontWeight: 'bold',
    backgroundColor: "#f1faee"
  }
});

有誰知道為什么會這樣，我是否遺漏了一些顯而易見的東西？ 提前道歉，因為這是我第一天進行 web/react-native 開發。 如果有人能讓我朝着正確的方向發展，我將不勝感激。 謝謝！

Answer 1

對於那個很抱歉。 我找到了答案，我不需要將 View 包裹在 Card 周圍。 JSX <> </> 足夠合適，並設法讓它工作。

const Card = (props) => {
  return (
    <>
        <Text style={styles.english}>{props.english}{"\n"}</Text>
        <Text style={styles.other}>{props.other}</Text>
    </>
    );
}