我有一个窗体 Package 在父容器（它是一个KeyboardAvoidingView）中，在添加适当的flex属性以水平和垂直居中窗体之后，窗体在两个方向上都不居中。
下面是包含表单的父容器的代码：

const AuthScreen = () => {
    const [isSignup, setIsSignup] = useState(false)

    return (
        <SafeAreaView style={{flex: 1}}>
            <PageContainer>
                <ScrollView>
                    <KeyboardAvoidingView style={styles.keyboardAvoidingView} behavior={Platform.OS === "ios" ? "height" : undefined} keyboardVerticalOffset={100}>
                        <LoginForm />
                    </KeyboardAvoidingView>
                </ScrollView>
            </PageContainer>
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    keyboardAvoidingView: {
        padding: 10,
        alignItems: 'center',
        justifyContent: 'center',
        flex: 1,
    }
})

export default AuthScreen

字符串
下面是表单（LoginForm）代码。这是我希望居中的表单：

const LoginForm = () => {
  const [formState, dispatchFormState] = useReducer(reducer, initialState);

  const inputChangedHandler = useCallback((id, value) => {
    // Validate current input status
    const validationResult = validateInput(id, value)
    dispatchFormState({id, value, validationResult})
  }, [dispatchFormState])

  return (
    <>
       <Input errorText={formState.inputValidities["email"]} inputChanged={inputChangedHandler} id="email" placeholder="Email Address" /> 
       <Input errorText={formState.inputValidities["password"]}  inputChanged={inputChangedHandler} id="password" placeholder="Password" /> 
       <SubmitButton title='Login' />
    </>
  )
}

const styles = StyleSheet.create({
 
})

export default LoginForm

型

Input组件代码：

const Input = props => {

    const {id, placeholder, inputChanged, errorText} = props

    return <View style={styles.container}>
        <View style={styles.inputContainer}>
            <TextInput onChangeText={(text) => inputChanged(id, text)} placeholderTextColor="white" style={styles.input} placeholder={placeholder} />
        </View>

        {
            errorText &&
            <View style={styles.errorContainer}>
                <Text style={{color: 'red'}}>{errorText[0]}</Text>
            </View>
        
        }
    </View>
}

const styles = StyleSheet.create({
    container: {
        width: '100%',
        marginTop: 32,
        alignItems: 'center',
    },
    input: {
        backgroundColor: colors.inputBgColor,
        flex: 1,
        paddingVertical: 6,
        paddingHorizontal: 12,
        letterSpacing: 0.3,
        color: 'white'
    },  
    inputContainer: {
        width: '100%',
        flexDirection: 'row',
        alignItems: 'center',
    },
    errorContainer: {
        alignItems: 'center',
        marginTop: 10
    }
})

export default Input

型
我能知道为什么这个表格没有居中吗？- 谢谢你-谢谢