gpt4 book ai didi

react-native - KeyboardAvoidingView 在我的应用程序上无法正常工作

转载 作者:行者123 更新时间:2023-12-04 13:28:21 34 4
gpt4 key购买 nike

我搜索了很多关于这个问题,我现在不知道该怎么做,所以我决定在这里问,任何帮助将不胜感激。在我的注册屏幕中,我有一些 input该用户必须填写,最后一个我需要避免键盘覆盖。所以我用了 KeyboardAvoidingView组件来解决这个问题,但正如您在屏幕截图中看到的,设备键盘仍然覆盖我的 input (生日)。
这是我在此屏幕上的代码:

import React, { useState } from 'react';
import { View, Text, KeyboardAvoidingView, Image, Dimensions, PixelRatio, StyleSheet } from 'react-native';
import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';

import { COLORS } from '../Constants/COLORS';
import PrimaryButton from '../Components/PrimaryButton';
import PrimaryInput from '../Components/PrimaryInput';
import CheckBox from '../Components/CheckBox';

const Register = (props) => {
const [lisenceTerm, setLisenceTerm] = useState(true);
const [privacyPolicy, setPrivacyPolicy] = useState(true);

return (
<View style={styles.screen}>
<View style={styles.imageContainer}>
<Image style={styles.image} source={require('../assets/Img/office_5.jpg')} />
</View>
<View style={styles.loginContainer}>
<View style={styles.headerContainer}>
<Text style={styles.headerText}>Join us</Text>
</View>
<KeyboardAvoidingView style={styles.inputContainer}>
<PrimaryInput placeholder='Name Surname' />
<PrimaryInput placeholder='Your Email' />
<PrimaryInput placeholder='Phone Number (05***)' />
<PrimaryInput placeholder='Birth Date' />
</KeyboardAvoidingView>
<View style={styles.checkBoxContainer}>
<CheckBox text='Kvkk sözleşmesini okudum, kabul ediyorum' active={lisenceTerm} onPress={() => setLisenceTerm(!lisenceTerm)} />
<CheckBox text='Kullanıcı sözleşmesini okudum, kabul ediyorum' active={privacyPolicy} onPress={() => setPrivacyPolicy(!privacyPolicy)} />
</View>
<View style={styles.buttonsContainer}>
<PrimaryButton
buttonStyle={styles.button}
textStyle={styles.buttonText}
title='Register' />
</View>
</View>
</View>
)
}

const styles = StyleSheet.create({
screen: {
flex: 1,
},
imageContainer: {
width: '100%',
height: '34%'
},
image: {
width: '100%',
height: '100%'
},
loginContainer: {
backgroundColor: 'white',
width: '100%',
height: '71%',
position: 'absolute',
zIndex: 1,
bottom: 0,
borderTopLeftRadius: 40,
borderTopRightRadius: 40,
alignItems: 'center'
},
buttonsContainer: {
width: '100%',
justifyContent: 'center',
alignItems: 'center'
},
button: {
justifyContent: 'center',
alignItems: 'center',
width: '75%',
paddingVertical: '3%',
marginTop: hp(1.2),
borderRadius: hp(3.5),
backgroundColor: COLORS.royalBlue
},
buttonText: {
fontSize: hp(3.2),
fontFamily: 'BalooPaaji2ExtraBold',
color: 'white'
},
arrow: {
right: 20
},
inputContainer: {
width: '100%',
justifyContent: 'center',
alignItems: 'center',
marginBottom: hp(1),
},
headerContainer: {
marginTop: hp(3),
marginBottom: hp(2),
width: '75%',
},
headerText: {
fontSize: hp(3.5),
fontFamily: 'BalooPaaji2Bold',
color: COLORS.royalBlue
},
checkBoxContainer: {
width: '70%',
justifyContent: 'flex-start',
marginBottom: hp(1)
}
})

export default Register;
下面是结果。顺便说一句,我用过 behaviorkeyboardVerticalOffset props 来控制这个组件的行为方式,但仍然存在同样的问题。
enter image description here

最佳答案

您的 KeyboardAvoidingView组件必须位于渲染树的顶部
为了滚动到您的加入我们 View ,您必须在您的 KeyboardAvoidingView 中设置一个 ScrollView。并且这些组件必须位于渲染器之上。
试试这个 (基于我的 iOS/android 设置):

import { KeyboardAvoidingView, ScrollView } from 'react-native';

const Register = (props) => {
const [lisenceTerm, setLisenceTerm] = useState(true);
const [privacyPolicy, setPrivacyPolicy] = useState(true);

return (
<KeyboardAvoidingView
style={{ flex: 1 }}
behavior={(Platform.OS === 'ios') ? 'padding' : null}
enabled
keyboardVerticalOffset={Platform.select({ ios: 80, android: 500 })}>
<ScrollView>
<View style={styles.screen}>
<View style={styles.imageContainer}>
<Image style={styles.image} source={require('../assets/Img/office_5.jpg')} />
</View>
<View style={styles.loginContainer}>
<View style={styles.headerContainer}>
<Text style={styles.headerText}>Join us</Text>
</View>
<View style={styles.inputContainer}>
<PrimaryInput placeholder='Name Surname' />
<PrimaryInput placeholder='Your Email' />
<PrimaryInput placeholder='Phone Number (05***)' />
<PrimaryInput placeholder='Birth Date' />
</View>
<View style={styles.checkBoxContainer}>
<CheckBox text='Kvkk sözleşmesini okudum, kabul ediyorum' active={lisenceTerm} onPress={() => setLisenceTerm(!lisenceTerm)} />
<CheckBox text='Kullanıcı sözleşmesini okudum, kabul ediyorum' active={privacyPolicy} onPress={() => setPrivacyPolicy(!privacyPolicy)} />
</View>
<View style={styles.buttonsContainer}>
<PrimaryButton
buttonStyle={styles.button}
textStyle={styles.buttonText}
title='Register' />
</View>
</View>
</View>
</ScrollView>
</KeyboardAvoidingView>
)
}

关于react-native - KeyboardAvoidingView 在我的应用程序上无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66712924/

34 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com