Когда я ввожу какое-либо значение в поле ввода, состояние обновляется и компонент отображается, но клавиатура также закрывается, но это происходит только в том случае, если я использую какой-либо пользовательский компонент. Может ли кто-нибудь помочь мне, что не так, я делаю заранее спасибо и извините, если мой язык плохой. ниже я делюсь своим кодом
Вот мой код:
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>
)
};