向组件添加边距会更改屏幕布局 react-native答案

【问题标题】：Adding margin to component changes screen layout react-native向组件添加边距会更改屏幕布局 react-native
【发布时间】：2018-11-13 06:06:45
【问题描述】：

我正在构建一个 react-native 应用程序，但在设置组件样式时遇到问题。

由于某种原因，当我向其中一个组件添加边距时，即使是“flex:1”，主组件也不会占据屏幕的整个高度。

在这个例子中，问题发生在后退按钮上，如果我使用填充它可以正常工作，但我需要使用边距，这样用户就不会误按错误的组件。

同样的问题发生在应用程序的其他部分，不同的组件具有边距属性。

主要组件

  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
  }

【问题讨论】：

标签： react-native flexbox

【解决方案1】：

我发现了问题，容器“listDescription”有一个“paddingTop: 16” 通过删除该属性，它允许容器将其余容器向下推。

【讨论】：