css - 一行中的两个输入？

Question

我在 react-native 中创建了一个表单，如下所示:

这是我的代码:

const Login = (props) => {
  const { phoneContainerStyles, loginButtonStyle } = styles;
  return (
    <View>
      <Field id="country" name="country" type="select" mode="dropdown" label="Country:" component={FormInput}>
        {
          props.countries && props.countries.map(country => <Picker.Item key={country.code} label={country.name} value={country.code} />)
        }
      </Field>
      <Field id="phone" name="phone" type="phone" label="Phone Number:" component={FormInput} />
      <Button type="submit" title="Login" buttonStyle={loginButtonStyle} onPress={props.handleSubmit(onLogin)} />
    </View>
  );
}

const styles = {
  loginButtonStyle: {
    backgroundColor: '#fc4482'
  }
}

这是表单输入:

const FormInput = (props) => {
  const { touched, error } = props.meta || {};
  const { labelStyles, errorStyles } = styles;
  return (
    <View>
      <Text style={[labelStyles, { display: props.label ? 'flex' : 'none', color: `${(touched && error) ? 'red' : 'black'}` }]}>{props.label}</Text>
      <View style={{ padding: props.inputWrapperPadding }}>
        {returnInput(props)}
        <View>
          <Text style={errorStyles}>{touched ? (error ? error : '') : ''}</Text>
        </View>
      </View>
    </View>
  );
};

const returnInput = (props) => {
  const { touched, error } = props.meta || {};  
  switch (props.type) {
    case 'select':
      .....
    case 'phone':
      return (
        <View>
          <TextBox {...props.input} id={`sel-${props.id}`} value={props.sel} style={styles.phoneSelStyle} />
          <TextBox {...props.input} id={props.id} placeholder={props.placeholder} disabled={props.disabled}
            style={[ styles.textBoxStyle, { borderColor: `${(touched && error) ? 'red' : 'black'}` }]}
            value={props.input.value} onChangeText={value => props.input.onChange(value)} />
        </View>
      );
    default:
      .....
  }
};

const styles = {
  labelStyles: {
    paddingLeft: 16, 
    fontWeight: 'bold'
  },
  errorStyles: {
    color: 'red',
    marginLeft: 16,
    marginRight: 16,
    marginBottom: 8
  },
  pickerStyles: {
    marginLeft: 16, 
    marginRight: 16
  },
  textBoxStyle: {
    marginBottom: 4,
    borderWidth: 1,
  }
  phoneSelStyle: {
    width: 50
  }
}

现在，我想要 1 行中电话号码标签下方的两个 TextInputs。

因此，我将此样式添加到 View :

case 'select':
  .......
case 'phone':
  return (
    <View style={styles.phoneContainerStyles}>
      <TextBox {...props.input} id={`sel-${props.id}`} value={props.sel} style={styles.phoneSelStyle} />
      <TextBox {...props.input} id={props.id} placeholder={props.placeholder} disabled={props.disabled}
        style={[ styles.textBoxStyle, { borderColor: `${(touched && error) ? 'red' : 'black'}` }]}
        value={props.input.value} onChangeText={value => props.input.onChange(value)} />
    </View>
  );
default:
  .......

样式如下:

phoneContainerStyles: {
    flex: 1,
    flexDirection: 'row'
  }

现在，如果我运行我的应用程序，则输出如下所示:

我不知道为什么我的文本框宽度 = 0。另外，为什么按钮会出现在文本框上。

关注@Himanshu 的回答后

Answer 1

像这样更新你的风格:

//Child view component (<TextBox>) style use flex property
textBoxStyle: {
   flex:2
   borderWidth: 1,
}
phoneSelStyle: {
   //width: 50 don't apply width instead use flex
   flex:8
}

//Parent view style

phoneContainerStyles: {
   flex: 1,
   flexDirection: 'row'
}