为啥视图不显示在 react-native 中？

Posted 2023-02-22

【中文标题】为啥视图不显示在 react-native 中？

【英文标题】：Why are views not displayed in react-native?为什么视图不显示在 react-native 中？

【发布时间】：2022-01-17 18:04:10

【问题描述】：

我正在学习 react-native 并且对它很陌生。所以，当我学习使用 flexbox 时，我遇到了一个问题。问题是，在另一个视图中时视图没有显示。我的代码 =

import React from "react";
import  View, StyleSheet  from "react-native";

class App extends React.Component 
  render() 
    return (
      <View style=styles.container>
        <View backgroundColor="red" />
        <View backgroundColor="blue" />
        <View backgroundColor="green" />
      </View>
    );
  


const styles = StyleSheet.create(
  container: 
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  ,
);

export default App;

如果你运行这个程序，你会得到一个空白屏幕。我不知道为什么会这样，我也想知道如何解决它。顺便说一下，我是在 Iphone 11 模拟器中运行的

【问题讨论】：

请检查我的回答，如果对您有帮助，请接受，如果没有，请告诉我您无法理解的内容。

【参考方案1】：

您已将 BackgroundColor 直接设置为 View，这是不可能的。它必须在“样式”参数中。此外，您没有为视图设置高度和宽度。

您可以像这样直接在视图中执行此操作：

<View style= backgroundColor: "red", height: 20, width: "100%" />

或在您的样式表中创建一个新样式，然后将其传递给视图。