显示键盘时“视图”容器下的白色部分问题

Question

如下图所示，使用和不使用键盘的屏幕截图。

这是下面的代码，请提前感谢我删除此白色部分

class Home extends Component {

    state = {
        email: '',
        password: ''
    }

    handleEmail = (text) => {
        this.setState({ email: text })
    }
    handlePassword = (text) => {
        this.setState({ password: text })
    }

    componentDidMount() {
        // do stuff while splash screen is shown
        // After having done stuff (such as async tasks) hide the splash screen
        SplashScreen.hide();
    }

    render() {
        return (
            <View style={styles.main_container}>
                <View style={styles.login_container}>
                    <Input
                        placeholder='INPUT WITH ICON'
                        leftIcon={{ type: 'font-awesome', name: 'chevron-left' }}
                    />
                </View>
            </View>
        );
    }
}

以下是我正在使用的样式：

main_container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#2e3344',
    flexDirection: 'row',
    width: '100%',
    height: '100%',
    position: 'absolute',
},
login_container: {
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'column',
    flex: 0.7,
},
input: {
    margin: 15,
    height: 40,
    minWidth: 200,
    maxWidth: 200,
    backgroundColor: '#fafafa',
    borderColor: '#7a42f4',
    borderWidth: 1,
    textAlign: 'center'
},