Почему backgroundcolor не работает с view в react native?

Я пытаюсь сделать верхнее меню и раскрасить его, но свойство 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>

Решено

Большое спасибо, ваши ответы очень полезны!

Можете ли вы toggle inspector и проверить свой стиль View?

oma 31.10.2018 13:50

что содержит ваш style.upMenu.text? возможно, вот в чем ваша проблема.

oma 31.10.2018 13:55
0
2
717
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

используйте приведенный ниже код,

      <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, чтобы изменить ее

Ответ принят как подходящий

Задайте свойство flex:1 родительскому стилю представления.

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

Другие вопросы по теме