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

Question

我正在 formik 上制作一个表单，并希望它占据全屏宽度。我试过 flex: 1，改变 flex 方向，改变 padding。当文本比输入字段宽时，它会扩展以适合它。我不想设置宽度，因为我希望它随 phone 屏幕的宽度而变化。这是它现在的样子 https://i.stack.imgur.com/wuwC9.png

这是我的样式代码：

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>
  );
}

Answer 1

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

你将在

中给出宽度

百分比

width: '100%'

关于屏幕尺寸

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

Answer 2

只用一个 TextInput 试试这个

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>
  );

一定会成功的:)

Answer 3

尝试使用文本输入样式

填充：0

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

React Native Text Input fields not taking full width even though flex: 1

reactjs

react-native

react-native-flexbox

react-styleguidist