时间戳

首页 > 解决方案 > SectionList 的内容从 Web 浏览器可见，但在 iOS 中不可见

javascript - SectionList 的内容从 Web 浏览器可见，但在 iOS 中不可见

问题描述

在构建 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 开发。如果有人能把我引向正确的方向，那将不胜感激。谢谢！

标签： javascriptreactjsreact-native

解决方案

对于那个很抱歉。我找到了答案，我不需要将 View 包裹在 Card 周围。JSX <> </> 足够合适，并设法让它工作。

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

推荐阅读