向组件添加边距会更改屏幕布局本机

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” 通过删除该属性，它可以使容器将其余的容器向下推。