Добавление полей к компонентам меняет компоновку экрана

Question

Я создаю собственное приложение и у меня возникла проблема со стилизацией компонентов.

По какой-то причине, когда я добавляю поле к одному из компонентов, основной компонент не занимаетполная высота экрана, хотя «flex: 1».

В этом примере проблема возникает с кнопкой «назад», если я использую отступ, она работает нормально, но мне нужно использовать поле, чтобы пользователь непо ошибке нажмите неправильный компонент.

И та же проблема возникает в остальной части приложения с различными компонентами, имеющими свойство margin.

Основной компонент

  body: {
    flex: 1,
    backgroundColor: 'green'
  },
  subHeader: {
    backgroundColor: '#f4f4f4',
    height: 95,
    flexDirection: 'row'
  },
  vericalBar: {
    width: 9
  },
  subHeaderDescription: {
    flex: 1,
    justifyContent: 'center',
    marginLeft: 16
  },
  subHeaderLocation: {
    color: '#2d2d2d',
    fontSize: 14,
    marginBottom: 10
  },
  subHeaderText: {
    color: '#2d2d2d',
    fontSize: 20
  },
  subHeaderStatus: {
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 18
  },
  listDescription: {
    backgroundColor: 'red',
    flexGrow: 1,
    paddingTop: 16,
    paddingLeft: 20
  },
  taskDescription: {
    color: '#2d2d2d',
    fontSize: 16
  }


   <View style={localStyles.body}>
    <Header navigation={this.props.navigation} />
    <View style={localStyles.subHeader}>
      <View style={[localStyles.vericalBar, { backgroundColor: task.color }]} />
      <View style={localStyles.subHeaderDescription}>
        <Text style={localStyles.subHeaderLocation}>{location.name}</Text>
        <Text style={localStyles.subHeaderText}>{task.name}</Text>
      </View>
      {iconSelector(task)}
    </View>

    <BackButton navigation={this.props.navigation} />

    <View style={localStyles.listDescription}>
      <Text style={localStyles.taskDescription}>{task.description}</Text>
    </View>

    {returnStatus(task)}
    <ReportIssueButton navigation={this.props.navigation} />
    <Footer navigation={this.props.navigation} />
  </View>

Кнопка возврата

    <TouchableWithoutFeedback onPress={() => navigation.goBack()}>
      <View style={localSytles.container}>
        <Image style={{ width: 14, height: 14 }} source={require('../../Images/Back.png')} />
        <Text style={localSytles.buttonText}>Back</Text>
      </View>
    </TouchableWithoutFeedback>

  container: {
    flexDirection: 'row',
    height: 40,
    paddingLeft: 20,
    alignItems: 'center',
    backgroundColor: 'blue'
  },
  buttonText: {
    color: '#2d2d2d',
    fontSize: 14,
    marginLeft: 10
  }

Answer 1

Я обнаружил проблему, у контейнера "listDescription" было "paddingTop: 16" удалив это свойство, он позволил контейнеру опустить остальные контейнеры.