Question

我正在尝试制作一个顶部菜单并为其着色，但是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>

已解决

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

Answer 1

使用下面的代码，

      <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进行更改

Answer 2

将flex:1赋予父视图样式。

  <View style={{flex:1}}>
  .....Child Views      
  </View>

为什么backgroundColor无法在React Native中与View一起使用？

2 个答案: