在状态更改键盘上反应本机textinput被关闭

Question

每当我在输入字段状态上输入任何值时，都会更新并渲染组件，但键盘也会被关闭，但这仅在我使用任何自定义组件时才会发生。有人可以帮助我我做错什么了吗，如果我的语言不好，请多谢。下面我共享我的代码

这是我的代码：

const ChangePasswordScreen = ({ navigation }) => {

    const [account, setAccount] = useState('');
    const [visible, setVisible] = useState(false);
    const [pages, setPages] = useState(1);
    const [firstPageActive, setFirstPageActive] = useState(true);
    const [secondPageActive, setSecondPageActive] = useState(false);
    const [oldMpin, setOldMpin] = useState(null);
    const [newMpin, setNewMpin] = useState(null);
    const [oldPass, setOldPass] = useState(null);
    const [newPass, setNewPass] = useState(null);
    const [test, setTest] = useState(null);
    const [counter, setCounter] = useState(null);

    let oldPin = useRef(null);
    let newnPin = useRef(null);

    let oldPassword = useRef(null);
    let newPassword = useRef(null);

    const Mpin = () => {
        console.log("Old Mpin", oldMpin)
        return (
            <Form
                style={{ marginBottom: 10 }}
            >
                <Item floatingLabel>
                    <Label>Old Mpin</Label>
                    <Input
                        value={oldMpin}
                        keyboardType={'numeric'}
                        keyboardAppearance={'default'}
                        maxLength={4}
                        onChangeText={(val)=>{setOldMpin(val)}}
                        getRef={(input): void => {
                            oldPin = input;
                        }}
                        onSubmitEditing={() => {
                            newnPin._root.focus();
                        }}
                    />
                </Item>
                <Item floatingLabel>
                    <Label>New Mpin</Label>
                    <Input
                        value={newMpin}
                        keyboardType={'numeric'}
                        keyboardAppearance={'default'}
                        maxLength={4}
                        onChangeText={(val) => { setNewMpin(val) }}
                        getRef={(input): void => {
                            newnPin = input;
                        }}
                    />
                </Item>
                <Button bordered block success style={{ marginTop: '5%', marginLeft: '5%' }}>
                    <Text>SUBMIT</Text>
                </Button>
            </Form>
        )
    }

    const Password = () => {
        return (
            <Form>
                <Item floatingLabel>
                    <Label>Old Password</Label>
                    <Input
                        value={oldPass}
                        onChangeText={(val) => {
                            setOldPass(val)
                        }}
                        getRef={(input): void => {
                            oldPassword = input;
                        }}
                        onSubmitEditing={() => {
                            newPassword._root.focus();
                        }}
                    />
                </Item>
                <Item floatingLabel>
                    <Label>New Password</Label>
                    <Input
                        value={newPass}
                        onChangeText={(val) => { setNewPass(val) }}
                        getRef={(input): void => {
                            newPassword = input;
                        }}
                    />
                </Item>

                <Button bordered block success style={{ marginTop: '5%', marginLeft: '5%' }}
                    onPress={_onSubmit}
                >
                    <Text>SUBMIT</Text>
                </Button>
            </Form>
        )
    }


    const page = pages;
    let shows = null;
    if (page == 1) {
        shows = <Mpin />
    } else if (page == 2) {
        shows = <Password />
    }

    console.log("Old Mpin", oldMpin)
    const _firstpage = () => {
        setPages(1);
        setFirstPageActive(true);
        setSecondPageActive(false);
    }

    const _secondpage = () => {
        setPages(2);
        setFirstPageActive(false);
        setSecondPageActive(true);
    }




    //Logout 
    const _onSubmit = async () => {
        let result = await AuthService.updateAccount(
            fullName,
            email,
            mobile,
            account.user_code
        )
        if (result.status == '1') {

            await AuthService.setAccount(result.account);
            let acDetails = await AuthService.getAccount();
            setAccount(acDetails)
        } else {
            alert("We are facing some issues")
        }
    }


    return (
        <Container style={styles.container}>
            {visible ?
                <Loader
                    visibility={visible}
                />
                :
                <>
                    <Header
                        androidStatusBarColor="#00B386"
                        style={{ backgroundColor: '#00B386' }}
                        hasSegment
                    >
                        <Left>
                            <Button transparent
                                onPress={() => { navigation.goBack(null) }}
                            >
                                <Icon name='arrow-back' />
                                <Text>Back</Text>
                            </Button>
                        </Left>
                        <Body>
                            <Title>Password</Title>
                        </Body>
                        <Right>
                        </Right>
                    </Header>
                    <Segment style={{ backgroundColor: '#00B386' }}>
                        <Button first
                            active={firstPageActive}
                            style={[(pages == 1) ? styles.activeButton : styles.button,
                            {
                                width: '50%', height: '100%', borderColor: '#00B386',
                                display: 'flex', justifyContent: 'center'
                            }]}
                            onPress={_firstpage}
                        >
                            <Text style={(pages == 1) ? styles.activeButtonText : styles.buttonText}>MPIN</Text>
                        </Button>
                        <Button
                            active={secondPageActive}
                            style={[(pages == 2) ? styles.activeButton : styles.button,
                            {
                                width: '50%', height: '100%', borderColor: '#00B386',
                                display: 'flex', justifyContent: 'center'
                            }]}
                            onPress={_secondpage}
                        >
                            <Text style={(pages == 2) ? styles.activeButtonText : styles.buttonText}>Password</Text>
                        </Button>
                    </Segment>
                    <Content padder>
                        {shows}
                        <Form>
                            <Input
                                value={test}
                                onChangeText={(val) => {

                                    setCounter(counter + 1)
                                    setTest(val)
                                }}
                            />
                        </Form>
                    </Content>
                </>
            }
        </Container>
    )
};