键盘出现时KeyboardAvoidingView和ScrollView中的组件重叠

Question

我在ScrollView（或KeyboardAwareScrollView）内部有KeyboardAvoidingView，内部有两个组件。但是，每当键盘被调用时，两个组件就会重叠：

<KeyboardAwareScrollView
    style={{ flex: 1 }}
>
    <SafeAreaView style={styles.container} >
        <ScrollView
            contentContainerStyle={styles.container}
            style={{ flexGrow: 1 }}
            showsVerticalScrollIndicator={false}
        >
            <View style={styles.photo}>
                <ImageUpload />
            </View>
            <View style={styles.form}>
                <Form
                    submitHandler={submitHandler}
                    loading={loading}
                />
            </View>
        </ ScrollView>
    </SafeAreaView>
</KeyboardAwareScrollView>

当键盘出现时，如何防止Form和ImageUpload这两个组件重叠？

组件的样式如下：

    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        width: width - 20,
        marginTop: 10,
    },
    photo: {
        flex: 1,
        width: "100%",
        alignItems: 'center',
        justifyContent: 'center',
    },
    form: {
        flex: 2,
        width: "100%",
    },