React Native: Scrollview работает неправильно

Question

Я делаю страницу регистрации приложения с реактивным-родным, и потому что может быть маленький смартфон, поэтому я хочу дать клавиатуры AvoidingView и ScrollView. Если он настроен правильно, он должен выглядеть как на фото ниже:

Но когда я настроил scrollview, он выглядел как на фото ниже,

Итак, я пробовал разные вещи, но я не знаю, почему это так. Я думаю, что у него большая картинка, поэтому просмотр прокрутки не корректен.

И я обнаружил, что когда я что-то пробовал, просмотр прокрутки не может охватывать самые низкие компоненты, кнопки. Кнопки вышли из прокрутки. Я думаю, что это может быть полезно для решения этой проблемы.

Можете ли вы дать мне несколько советов по этой ситуации?

Код ниже,

index.tsx

render() {
    return (
        <KeyboardAvoidingView style={styles.container} behavior="padding">
            <ScrollView contentContainerStyle={{flexGrow: 1}}>
                { this.state.term
                    ? <Term />
                    : null
                }
                <View style={styles.imgContainer}>
                    <Image
                        source={require('../../../assets/test.png')}
                        style={styles.img}/>
                </View>
                <View style={styles.titleContainer}>
                    <Text style={styles.title}>샵치즈 회원가입</Text>
                </View>
                <View style={styles.inputBoxContainer}>
                    <TextInput
                        style={styles.inputBox} value={this.state.username}
                        placeholder="아이디" placeholderTextColor="rgb(152, 169, 188)"
                        onChangeText={(username)=>this.setState({username})}/>
                    <Text style={styles.describeText}>5~20자의 영문 소문자, 숫자만 사용 가능합니다.</Text>
                    <TextInput
                        style={styles.inputBox} value={this.state.password}
                        placeholder="비밀번호" placeholderTextColor="rgb(152, 169, 188)"
                        onChangeText={(password)=>this.setState({password})}/>
                    <Text style={styles.describeText}>8~16자 영문 대 소문자, 숫자, 특수문자만 사용 가능합니다.</Text>
                    <TextInput
                        style={styles.inputBox} value={this.state.phone}
                        placeholder="핸드폰 번호" placeholderTextColor="rgb(152, 169, 188)"
                        onChangeText={(phone)=>this.setState({phone})}/>
                </View>
                <View style={styles.termContainer}>
                    <TouchableOpacity onPressOut={this.checkedBox}>
                        { this.state.checked
                            ? <MaterialCommunityIcons 
                                size={20} name='checkbox-marked-circle-outline'/>
                            : <MaterialCommunityIcons 
                                size={20} name='checkbox-blank-circle-outline'/>
                        }  
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => {this.setState({term: true})}}>
                        <Text style={styles.termLink}>개인정보처리방침과 약관</Text>
                    </TouchableOpacity>
                    <Text>에 동의합니다.</Text>
                </View>
                <View style={styles.buttonBox}>
                    <TouchableHighlight 
                        style={styles.registButton}
                        onPress={() => this.props.navigation.navigate('AuthHome')}>
                        <Text style={styles.registText}>뒤로가기</Text>
                    </TouchableHighlight>
                    <TouchableHighlight
                        style={styles.loginButton}
                        onPress={this._signUp}>
                        <Text style={styles.loginText}>회원가입</Text>
                    </TouchableHighlight>
                </View>
                <View style={{flex:1}}/>
            </ScrollView>
        </KeyboardAvoidingView>
    );
}}

style.tsx

const styles = StyleSheet.create({
    container: {
      flexGrow:1, 
      justifyContent:"flex-end",
    },
    imgContainer: {
      width: "100%",
      height: "44%",
    },
    img: {
      width: "100%",
      height: "100%",
    },
    titleContainer: {
      alignItems: "center",
    },
    title: {
      fontSize: 20,
      fontWeight: "bold",
      marginTop: 22,
      marginBottom: 17,
    },
    inputBoxContainer: {
      width: "100%",
      paddingLeft: "4%",
      paddingRight: "4%",
    },
    inputBox: {
      backgroundColor: "rgb(248, 250, 251)",
      paddingTop: 11,
      paddingBottom: 11,
      paddingLeft: 16,
      marginBottom: 11,
    },
    describeText: {
      fontSize: 11,
      marginBottom: 11,
      marginLeft: 13,
    },
    termContainer: {
      flexDirection: "row",
      paddingLeft: "4%",
      marginTop: 10,
    },
    termLink: {
      color: "blue",
      textDecorationLine: "underline",
      marginLeft: 10,
    },
    buttonBox: {
      flexDirection: "row",
      justifyContent: "center",
      paddingTop: 20,
    },
    registButton: {
      backgroundColor: "rgb(242, 244, 246)",
      alignItems: "center",
      width: "42%",
      paddingTop: 11,
      paddingBottom: 11,
      borderRadius: 4,
    },
      registText: {
      color: "rgb(119, 140, 162)"
    },
      loginButton: {
      backgroundColor: "rgb(77, 124, 254)",
      alignItems: "center",
      width: "42%",
      paddingTop: 11,
      paddingBottom: 11,
      marginLeft: 20,
      borderRadius: 4,
    },
      loginText: {
      color: "rgb(255, 255, 255)"
    },
})