布局上的行方向之间的大边距答案

【问题标题】：Big margin between row direction on layout布局上的行方向之间的大边距
【发布时间】：2019-01-01 11:43:13
【问题描述】：

我在格式化我的一个屏幕时遇到问题。我想连续放置 3 个文本输入，在它们的正下方有一个按钮和一个复选框，下面有一张图片了解更多详细信息（截至目前，它是一个交叉框和一个问号，别介意我会修复它之后）。但是我在两行之间得到了一个巨大的不需要的边距，我无法摆脱它。这是代码

    <View style = {styles.container}>
      <View style={styles.rowInit2}>
        <View style={{flex:1}}>
          <TextInput style ={styles.input}
          maxLength={25}
          onChangeText={UserEmail => this.setState({UserEmail})}
          placeholder = 'Item'
          underlineColorAndroid='rgba(0,0,0,0.1)'/>
        </View>
        <View style={{flex:1}}>
          <TextInput style ={styles.input2}
          maxLength={3}
          onChangeText={UserEmail => this.setState({UserEmail})}
          placeholder = 'Cantidad'
          underlineColorAndroid='rgba(0,0,0,0.1)'/>
        </View>
        <View style={{flex:1}}>
          <TextInput style ={styles.input2}
          maxLength={5}
          placeholder = 'Precio'
          onChangeText={UserEmail => this.setState({UserEmail})}
          underlineColorAndroid='rgba(0,0,0,0.1)'/>
        </View>
      </View>
    <View style = {styles.row}>
      <View style={{flex:1}}>
        <CheckBox
            checkedIcon={() => {return (<Icon type='feather' name= 'check' />)}}
            uncheckedIcon={() => {return (<Icon type='feather' name= 'check' />)}}
            checked={this.state.checked}
            onPress={() => this.setState({checked: !this.state.checked})}
            containerStyle={{backgroundColor:'transparent', width:'20%'}}
          />
      </View>
      <View style={{flex:1}}>
        <Icon
        containerStyle ={styles.iconStyle}
        name= 'add-circle'
        color='#0419ba'
        onPress={() => console.log('hello')}
        />
      </View>
    </View>
     </View>

这是CSS

export default{
  container:{
    flex:1,
    backgroundColor:'#fff'
  },
  itemVendido:{
    color:'tomato',
    fontWeight:'500',
  },

  rowInit2:{
    flex: 1,
    flexGrow: 1,
    width:'100%',
    marginTop:'5%',
    justifyContent:'space-between',
    flexDirection:'row',
    padding:'2%',
  },
  input:{
    width:'90%',
    borderRadius: 25,
    backgroundColor: 'rgba(0,0,0,0)',
    fontSize:16,
  },
  input2:{
    width:'65%',
    borderRadius: 25,
    backgroundColor: 'rgba(0,0,0,0)',
    fontSize:16,
  },
  row:{
    flex: 1,
    flexGrow: 1,
    width:'100%',
    justifyContent:'space-between',
    flexDirection:'row',
    padding:'2%',
  },
  iconStyle:{
    fontSize:30,
    padding:'3%',
  },
}

this is how it looks like

提前致谢！

【问题讨论】：

标签： javascript react-native layout

【解决方案1】：

我刚刚使用 flexShrink:1 创建了一个新容器还是谢谢！

【讨论】：