react-native - react native 避免使用键盘，但将标题固定在屏幕上
问题描述
基本上我有一个超过 16 个文本字段的屏幕，我需要键盘不要覆盖选定的文本字段。
并且如果选定的文本字段没有被键盘覆盖，请不要将其向上推。（这已经有效）
我遇到的大问题是我有一个需要在屏幕上修复的标题（styles.headerBackground），并且（styles.contactsOptions）也需要修复。
我该如何解决这个问题？
下面我分别放渲染代码和样式代码
渲染代码：
<KeyboardAwareScrollView style={styles.container}>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<>
<View style={styles.appHeaderPadding}>
{loading ? (
<View
style={{
paddingVertical: 20,
}}>
<ActivityIndicator animating size="large" />
</View>
) : (
<>
<View
style={[
styles.headerBackground,
name.length >= 26 && { height: wp('38%') },
]}>
<View style={styles.header}>
<TouchableOpacity
onPress={() => navigateAnother()}
style={styles.arrowBackButton}>
<ArrowBack width="12" height="20" />
</TouchableOpacity>
<View style={styles.headerBar}>
<Image
style={styles.photo_contact}
source={{
uri:
photo ||
'https://mozaik-public.s3-sa-east-1.amazonaws.com/default/profile-user.png',
}}
/>
<View style={styles.viewName}>
{editable ? (
<TextInput
editable={editable}
placeholder="Nome"
placeholderTextColor="#fff"
multiline
value={contactData.contact_name || name}
style={
editable
? styles.textInputEditable
: styles.textInputEditable
}
onChangeText={text => {
contactData.contact_name = text;
setName(text);
}}
/>
) : (
<Text
numberOfLines={1}
style={styles.textInputEditable}>
{contactData.contact_name || name}
</Text>
)}
</View>
</View>
</View>
</View>
<View style={styles.contactsOptions}>
<View style={styles.contactOption}>
<Whatsapp whidth="31.5" height="31.5" />
</View>
<View style={styles.contactOption}>
<EmailL whidth="30" height="24" />
</View>
<View style={styles.contactOption}>
<Phone whidth="50" height="50" />
</View>
</View>
<View style={styles.infoContainer}>
<ScrollView keyboardDismissMode="interactive">
<View style={styles.infoRow}>
<Text style={styles.infoTitle}>Mobile:</Text>
{editable && (
<>
<View>
<TextInputMask
type="cel-phone"
options={{
maskType: 'BRL',
withDDD: true,
dddMask: '(99) ',
}}
multiline={true}
editable={editable}
value={contactData.contact_phone || newNumber}
onChangeText={text => {
setNewNumber(text);
contactData.contact_phone = text;
contactData.contact_phones = [
...telephones,
text,
];
}}
onBlur={() => addNumberInArray()}
onKeyPress={() => setIsEditingNumber(true)}
style={
editable
? styles.infoInputEditableNumber
: styles.infoInput
}
/>
</View>
</>
)}
</View>
<View style={styles.infoRow}>
<Text style={styles.infoTitle}>E-mail:</Text>
<TextInput
multiline={true}
editable={editable}
keyboardType="email-address"
autoCapitalize="none"
autoCorrect={false}
value={contactData.contact_email || email}
onChangeText={text => {
contactData.contact_email = text;
setEmail(text);
}}
style={
editable ? styles.infoInputEditable : styles.infoInput
}
/>
</View>
<View style={styles.infoRow}>
<Text style={styles.infoTitle}>CPF:</Text>
<TextInputMask
type={'cpf'}
multiline={true}
editable={editable}
value={contactData.contact_cpf || cpf}
keyboardType="numeric"
onChangeText={text => {
contactData.contact_cpf = text;
setCPF(text);
}}
style={
editable ? styles.infoInputEditable : styles.infoInput
}
/>
</View>
<View style={styles.infoRow}>
<Text style={styles.infoTitle}>Data de Nascimento:</Text>
<TextInputMask
type={'datetime'}
options={{
format: 'DD/MM/YYYY',
}}
multiline={true}
editable={editable}
value={contactData.contact_birth_date || birthDate}
onChangeText={text => {
contactData.contact_birth_date = text;
setBirthDate(text);
}}
style={
editable ? styles.infoInputEditable : styles.infoInput
}
/>
</View>
<View style={styles.infoRow}>
<Text style={styles.infoTitle}>ID Externo:</Text>
<TextInput
multiline={true}
editable={editable}
value={contactData.id_externo || idExtern}
onChangeText={text => {
contactData.id_externo = text;
setIdExtern(text);
}}
style={
editable ? styles.infoInputEditable : styles.infoInput
}
/>
</View>
{contactData.corporativo && (
<>
<View style={styles.infoRow}>
<Text style={styles.infoTitle}>CNPJ:</Text>
<TextInputMask
type="cnpj"
multiline={true}
editable={editable}
value={contactData.cnpj || cnpj}
onChangeText={text => {
contactData.cnpj = text;
setCnpj(text);
}}
style={
editable
? styles.infoInputEditable
: styles.infoInput
}
/>
</View>
<View style={styles.infoRow}>
<Text style={styles.infoTitle}>Razão Social:</Text>
<TextInput
multiline={true}
editable={editable}
value={contactData.razao_social || razaoSocial}
onChangeText={text => {
contactData.razao_social = text;
setRazaoSocial(text);
}}
style={
editable
? styles.infoInputEditable
: styles.infoInput
}
/>
</View>
<View style={styles.infoRow}>
<Text style={styles.infoTitle}>Nome Fantasia:</Text>
<TextInput
multiline={true}
editable={editable}
value={contactData.nome_fantasia || nomeFantasia}
onChangeText={text => {
contactData.nome_fantasia = text;
setNomeFantasia(text);
}}
style={
editable
? styles.infoInputEditable
: styles.infoInput
}
/>
</View>
</>
)}
<View style={styles.infoRow}>
<Text style={styles.infoTitle}>CEP:</Text>
<TextInputMask
type="zip-code"
multiline={true}
editable={editable}
value={cep}
onChangeText={text => {
setCEP(text);
cepMask(text);
}}
style={
editable ? styles.infoInputEditable : styles.infoInput
}
/>
</View>
<View style={styles.infoRow}>
<Text style={styles.infoTitle}>Endereço:</Text>
<TextInput
multiline={true}
editable={editable}
value={contactData.contact_address || address}
onChangeText={text => {
contactData.contact_address = text;
setAddress(text);
}}
style={
editable ? styles.infoInputEditable : styles.infoInput
}
/>
</View>
<View style={styles.infoRow}>
<Text style={styles.infoTitle}>Número:</Text>
<TextInput
multiline={true}
editable={editable}
value={contactData.contact_address_number || number}
onChangeText={text => {
contactData.contact_address_number = text;
setNumber(text);
}}
style={
editable ? styles.infoInputEditable : styles.infoInput
}
/>
</View>
<View style={styles.infoRow}>
<Text style={styles.infoTitle}>Complemento:</Text>
<TextInput
// multiline={true}
editable={editable}
value={
contactData.contact_address_complement || complement
}
onChangeText={text => {
contactData.contact_address_complement = text;
setComplement(text);
}}
style={
editable ? styles.infoInputEditable : styles.infoInput
}
/>
</View>
<View style={styles.infoRow}>
<Text style={styles.infoTitle}>Cidade:</Text>
<TextInput
multiline={true}
editable={editable}
value={contactData.contact_city || city}
onChangeText={text => {
contactData.contact_city = text;
setCity(text);
}}
style={
editable ? styles.infoInputEditable : styles.infoInput
}
/>
</View>
<View style={styles.infoRow}>
<Text style={styles.infoTitle}>Estado:</Text>
<TextInput
multiline={true}
editable={editable}
value={contactData.contact_state || state}
onChangeText={text => {
contactData.contact_state = text;
setState(text);
}}
style={
editable ? styles.infoInputEditable : styles.infoInput
}
/>
</View>
<View style={styles.infoRow}>
<Text style={styles.infoTitle}>Facebook:</Text>
<TextInput
multiline={true}
editable={editable}
value={contactData.contact_facebook || facebook}
onChangeText={text => {
contactData.contact_facebook = text;
setFacebook(text);
}}
style={
editable ? styles.infoInputEditable : styles.infoInput
}
/>
</View>
<View style={styles.infoRow}>
<Text style={styles.infoTitle}>Instagram:</Text>
<TextInput
multiline={true}
editable={editable}
value={contactData.contact_instagram || instagram}
onChangeText={text => {
contactData.contact_instagram = text;
setInstagram(text);
}}
style={
editable ? styles.infoInputEditable : styles.infoInput
}
/>
</View>
<View style={styles.infoRow}>
<Text style={styles.infoTitle}>Twitter:</Text>
<TextInput
multiline={true}
editable={editable}
value={contactData.contact_twitter || twitter}
onChangeText={text => {
contactData.contact_twitter = text;
setTwitter(text);
}}
style={
editable ? styles.infoInputEditable : styles.infoInput
}
/>
</View>
<View style={styles.infoRow}>
<View style={{ marginTop: 15, marginBottom: 15 }}>
<Text style={styles.infoTitleWildCards}>
WildCards:
</Text>
<View style={styles.infoNumber}>
<>
<FlatList
data={contactData.wildcard_fields}
keyExtractor={item => item.id}
renderItem={({ item: data, index }) => (
<View
style={{
paddingTop: 10,
paddingBottom: 10,
flexDirection: 'row',
alignSelf: 'center',
borderColor: '#E4E4E4',
justifyContent: 'center',
alignItems: 'center',
borderBottomWidth: 1,
}}>
<View>
<TextInput
style={
editable
? styles.infoInputEditableWildcard
: styles.infoInputWildcard
}>
{' '}
{data.label}{' '}
</TextInput>
</View>
<View>
<TextInput
style={
editable
? styles.infoInputEditableWildcard
: styles.infoInputWildcard
}>
{data.value}{' '}
</TextInput>
</View>
{editable && (
// <View style={{ width: wp('5%') }}>
<TouchableOpacity
style={{
padding: 2,
alignSelf: 'center',
alignItems: 'center',
marginTop: 3,
}}
onPress={() =>
setWildcards(currentWildCard =>
currentWildCard.filter(
(d, i) => i !== index,
),
)
}>
<IconX
width="18"
height="18"
alignSelf="center"
/>
</TouchableOpacity>
// </View>
)}
</View>
)}
/>
<View style={styles.viewWCLabel}>
<View style={{ flexDirection: 'row' }}>
<TextInput
onChangeText={setNewLabel}
value={newLabel}
onKeyPress={() => setIsEditingWildCard(true)}
onBlur={() => addWildCardsInArray()}
placeholder="Digite a Label"
style={
editable
? styles.infoInputEditableWildcard
: styles.infoInputWildcard
}
/>
<TextInput
onChangeText={setNewValue}
value={newValue}
// onKeyPress={() => setIsEditingWildCard(true)}
onBlur={() => addWildCardsInArray()}
placeholder="Digite o valor"
style={
editable
? styles.infoInputEditableWildcard
: styles.infoInputWildcard
}
/>
</View>
<View style={{ width: wp('5%') }} />
</View>
{isEditingWildCard && (
<View style={styles.viewWCLabel}>
<View style={{ flexDirection: 'row' }}>
<TextInput
onChangeText={text => setNewLabel(text)}
// value={newLabel}
onBlur={() => addWildCardsInArray()}
placeholder="Digite a Label"
style={
editable
? styles.infoInputEditableWildcard
: styles.infoInputWildcard
}
/>
</View>
<View style={styles.viewWildCards}>
<TextInput
onChangeText={value => setNewValue(value)}
value={newValue}
onBlur={() => addWildCardsInArray()}
placeholder="Digite o valor"
style={
editable
? styles.infoInputEditableWildcard
: styles.infoInputWildcard
}
/>
</View>
<View style={{ width: wp('5%') }} />
</View>
)}
</>
</View>
</View>
</View>
{editable && (
<TouchableOpacity
style={styles.buttonSave}
onPress={() => setModalVisible(true)}>
<Text style={styles.textStyle}>Salvar</Text>
</TouchableOpacity>
)}
</ScrollView>
</View>
</>
)}
</View>
</>
</TouchableWithoutFeedback>
</KeyboardAwareScrollView>
样式代码：
import { StyleSheet, Platform } from 'react-native';
import {
widthPercentageToDP as wp,
heightPercentageToDP as hp,
} from 'react-native-responsive-screen';
export const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#716AE4',
borderBottomWidth: 600,
borderBottomColor: '#fff',
},
keyboardContainer: {
flex: 1,
backgroundColor: 'rgb(0,0,0)',
},
appHeaderPadding: {
alignItems: 'stretch',
backgroundColor: '#ffffff',
flex: 1,
width: wp('100%'),
zIndex: 1,
},
headerBackground: {
height: wp('36%'),
backgroundColor: '#716AE4',
alignSelf: 'stretch',
zIndex: 10,
elevation: 10,
borderBottomRightRadius: 36,
borderBottomLeftRadius: 36,
},
header: {
marginTop: wp('15%'),
flexDirection: 'row',
alignItems: 'center',
// zIndex: 1,
// position: 'absolute',
// backgroundColor: '#000'
},
viewName: {
maxWidth: wp('90%'),
height: wp('10%'),
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
headerBar: {
width: wp('75%'),
marginTop: wp('-5%'),
alignItems: 'center',
padding: 3,
height: 50,
},
contacts: {
flexDirection: 'row',
alignSelf: 'stretch',
marginHorizontal: hp('3%'),
marginVertical: wp('5%'),
paddingBottom: 15,
borderBottomWidth: 3,
borderColor: '#C4C4C4',
},
buttonNameNotEditable: {
width: hp('3%'),
alignItems: 'center',
},
contacts_photo: {
marginRight: hp('1.5%'),
},
contacts_middle: {
marginRight: hp('1%'),
width: wp('53.14%'),
},
photo_contact: {
borderWidth: 2,
borderColor: 2,
alignItems: 'center',
justifyContent: 'center',
borderRadius: wp('17%'),
width: wp('15%'),
height: wp('15%'),
},
contactsOptions: {
alignItems: 'stretch',
justifyContent: 'center',
flexDirection: 'row',
zIndex: 10,
elevation: 10,
backgroundColor: '#fff',
paddingHorizontal: wp('12.08%'),
paddingVertical: wp('4.83%'),
},
contactOption: {
marginHorizontal: wp('2.42%'),
borderRadius: wp('2.90%'),
width: wp('15.70%'),
height: wp('15.70%'),
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#716AE4',
},
infoContainer: {
padding: wp('2.42%'),
paddingHorizontal: wp('6%'),
},
infoRow: {
borderTopWidth: 1,
borderColor: '#E4E4E4',
paddingTop: 15,
flexDirection: 'row',
paddingBottom: 15,
alignItems: 'center',
width: '100%',
},
infoRowWildCards: {
paddingTop: 15,
flexDirection: 'row',
paddingBottom: 15,
alignItems: 'center',
},
infoTitleWildCards: {
fontSize: wp('3.62%'),
color: '#716AE4',
paddingBottom: 15,
},
infoInput: {
fontSize: wp('3.62%'),
color: '#716AE4',
fontWeight: 'bold',
paddingLeft: wp('2.42%'),
},
infoInputEditable: {
fontSize: wp('3.62%'),
color: '#716AE4',
borderBottomWidth: 1,
borderBottomColor: '#716AE4',
justifyContent: 'center',
fontWeight: 'bold',
marginLeft: 5,
width: wp('100%'),
marginBottom: 5,
},
infoInputEditableNumber: {
fontSize: wp('3.62%'),
color: '#716AE4',
alignItems: 'center',
justifyContent: 'center',
fontWeight: 'bold',
padding: 5,
width: wp('60%'),
},
infoInputWildcard: {
// borderWidth: 1,
fontSize: wp('3.62%'),
color: '#716AE4',
fontWeight: 'bold',
padding: wp('2.42%'),
width: wp('40%'),
},
infoInputEditableWildcard: {
fontSize: wp('3.62%'),
color: '#716AE4',
fontWeight: 'bold',
padding: wp('2.42%'),
width: wp('41.2%'),
},
infoNumber: {
flexDirection: 'column',
},
centeredView: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
marginBottom: 50,
},
modalView: {
width: wp('90%'),
backgroundColor: '#fff',
borderRadius: 20,
paddingVertical: 25,
alignItems: 'center',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
});
解决方案
推荐阅读
- c++ - 如何确定使用空大括号初始化程序调用的构造函数？
- java - 在运行 jar 时访问 jar 之外的 prop 文件
- python-3.x - 获取聚合方法MongoDB结果的大小
- powershell - Powershell get-childitem 不包括一系列日期
- tibco-business-works - 具有 dateTime 返回类型的 TIBCO BW6 自定义函数
- javascript - 从父数组中过滤一个空数组
- javascript - 如何在具有固定宽度和高度的元素中显示图像
- javascript - 如何使用该方法： $().button('toggle') 用于此引导程序“单选按钮列表”？
- ios - Fabric 在“live app”上给出了“libc++abi.dylib”崩溃的报告，但我无法复制崩溃
- mysql - MariaDB ON DUPLICATE KEY UPDATE 自动增量