Почему backgroundColor не работает с View в React Native? - PullRequest
Новая
       7

Почему backgroundColor не работает с View в React Native?

0 голосов
/ 31 октября 2018

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

решаемые

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

Ответы [ 2 ]

0 голосов
/ 31 октября 2018

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

  <View style={{flex:1}}>
  .....Child Views      
  </View>
0 голосов
/ 31 октября 2018

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

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

...