时间戳

首页 > 解决方案 > 为什么 backgroundColor 不适用于 React Native 中的 View？

react-native - 为什么 backgroundColor 不适用于 React Native 中的 View？

问题描述

我正在尝试制作一个顶级菜单并为其着色，但backgroudColor属性不起作用。

应用程序现在的样子

      <View>
        <View style={{
          flex: 1,
          height: 50,
          flexDirection: 'row',
          justifyContent: 'space-between',
          backgroundColor: 'skyblue'
        }}>
          <View style={{flex: 1, backgroundColor: 'skyblue'}}><Text style={style.upMenu.text}>H</Text></View>
          <View style={{flex: 1, backgroundColor: 'skyblue'}}><Text style={style.upMenu.text}>Plugins</Text></View>
          <View style={{flex: 1, backgroundColor: 'skyblue'}}><Text style={style.upMenu.text}>Remote</Text></View>
          <View style={{flex: 1, backgroundColor: 'skyblue'}}><Text style={style.upMenu.text}>P</Text></View>
        </View>
      </View>

解决了

非常感谢，您的回答都非常有用！

标签： react-nativestyling

解决方案

使用下面的代码，

      <View style={{ flex: 1 }}>
    <View
      style={{
        flex: 1,
        height: 50,
        flexDirection: "row",
        justifyContent: "space-between",
        backgroundColor: "#87ceeb",
        maxHeight: 20
      }}
    >
      <View style={{ flex: 1, backgroundColor: "#87ceeb" }}>
        <Text style={style.upMenu.text}>H</Text>
      </View>
      <View style={{ flex: 1, backgroundColor: "#87ceeb" }}>
        <Text style={style.upMenu.text}>Plugins</Text>
      </View>
      <View style={{ flex: 1, backgroundColor: "#87ceeb" }}>
        <Text style={style.upMenu.text}>Remote</Text>
      </View>
      <View style={{ flex: 1, backgroundColor: "#87ceeb" }}>
        <Text style={style.upMenu.text}>P</Text>
      </View>
    </View>
  </View>

要获得所需的标题高度，请使用maxHeight来更改它

推荐阅读