Question

我无法格式化自己的一个屏幕。我想连续放置3个textinput，并在它们的下方有一个按钮和一个复选框，下面有一张图片以获取更多详细信息（到目前为止，它是一个交叉框和一个问号，请不要介意我会修复它后来）。但是我在两行之间得到了巨大的不必要的余量，而且我无法摆脱它。这是代码

    <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

提前谢谢！

Answer 1

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

布局上行方向之间的空白很大

1 个答案: