Reactjs 即使flex:1，React本机文本输入字段也不全宽

我正在formik上制作一个表单，并希望它具有全屏幕宽度。我试过flex:1，改变flex方向，改变填充。当文本宽度超过输入字段时，它会展开以适应它。我不想设置宽度，因为我希望它随手机屏幕的宽度而改变。这是一张它现在的样子

以下是我的样式代码：

const styles = StyleSheet.create({
  input: {
    padding: 10,
    fontSize: 18,
    borderRadius: 6,
    flex: 1,
    borderBottomColor: '#000',
    borderBottomWidth: 2,
    alignSelf: 'stretch',
    flexDirection: 'row',
  },
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  inner: {
    //padding: 20,
    flex: 1,
    // justifyContent: 'flex-end',
  },
});

输入字段如下所示：

 <View style={styles.container}>
      <Formik
        initialValues={{
          first_name: '',
          last_name: '',
          address_1: '',
          address_2: '',
          city: '',
          state: '',
          postcode: '',
          country: 'CA',
          email: 'john.doe@example.com',
          phone: '647-274-8068',
        }}
        // Form submission action
        onSubmit={async (values) => {
          addData(values);
        }}>
        {(props) => (
          <KeyboardAvoidingView
            behavior={Platform.OS === 'ios' ? 'padding' : null}
            style={{flex: 1}}>
            <ScrollView style={styles.inner}>
              <TextInput
                style={styles.input}
                placeholder="first name"
                onChangeText={props.handleChange('first_name')}
                value={props.values.first_name}
              />
              <TextInput
                style={styles.input}
                placeholder="last name"
                onChangeText={props.handleChange('last_name')}
                value={props.values.last_name}
              />
              <TextInput
                style={styles.input}
                placeholder="Street Address"
                onChangeText={props.handleChange('address_1')}
                value={props.values.address_1}
              />
              <TextInput
                style={styles.input}
                placeholder="Unit"
                onChangeText={props.handleChange('address_2')}
                value={props.values.address_2}
              />
              <TextInput
                style={styles.input}
                placeholder="City"
                onChangeText={props.handleChange('city')}
                value={props.values.city}
              />
              <Picker
                selectedValue={props.values.country}
                onValueChange={props.handleChange('country')}>
                <Picker.Item label="Canada" value="CA" />
                <Picker.Item label="USA" value="US" />
              </Picker>
              <Picker
                selectedValue={props.values.state}
                onValueChange={props.handleChange('state')}>
                {CA.map((item, index) => {
                  return <Picker.Item label={item} value={index} key={index} />;
                })}
                <Picker.Item label="Alberta" value="AB" />
                <Picker.Item label="British Columbia" value="BC" />
                <Picker.Item label="Manitoba" value="MB" />
                <Picker.Item label="New Brunswick" value="NB" />
                <Picker.Item label="Newfoundland and Labrador" value="NL" />
                <Picker.Item label="Northwest Territories" value="NT" />
                <Picker.Item label="Nova Scotia" value="NS" />
                <Picker.Item label="Nunavut" value="NU" />
                <Picker.Item label="Ontario" value="ON" />
                <Picker.Item label="Prince Edward Island" value="PE" />
                <Picker.Item label="Quebec" value="QC" />
                <Picker.Item label="Saskatchewan" value="SK" />
                <Picker.Item label="Yukon" value="YT" />
              </Picker>
              <TextInput
                style={styles.input}
                placeholder="Postal Code"
                onChangeText={props.handleChange('postcode')}
                value={props.values.postcode}
              />
              <Button
                title="place order"
                color="maroon"
                onPress={props.handleSubmit}
              />
            </ScrollView>
          </KeyboardAvoidingView>
        )}
      </Formik>
    </View>
  );
}

{
添加数据（值）；
}}>
{（道具）=>(
{CA.map（（项目，索引）=>{
返回；
})}
)}
);
}

您需要为包装器的文本区域留出一些宽度

你将给出宽度

百分比

宽度：“100%”

关于屏幕的尺寸

import { Dimensions } from 'react-native';
const windowWidth = Dimensions.get('window').width;
width: windowWidth;

---

只要用一个文本输入就可以了

return (
    <View style={styles.container}>
      <KeyboardAvoidingView
        behavior={Platform.OS === "ios" ? "padding" : null}
        style={{ flex: 1, width: "100%" }}
      >
        <ScrollView style={styles.inner}>
          <TextInput
            style={styles.input}
            placeholder="Postal Code"
            value={"fdf"}
          />
        </ScrollView>
      </KeyboardAvoidingView>
    </View>
  );

返回(
);

---

它肯定会工作：）

需要完整的渲染组件，textinput的位置取决于父用户界面。。。编辑并粘贴您的整个组件更新，我认为它会太长，但我现在有它