React Native KeyboardAvoidingView 无法正常工作
Posted
技术标签:
【中文标题】React Native KeyboardAvoidingView 无法正常工作【英文标题】：React Native KeyboardAvoidingView not working properly 【发布时间】：2018-02-12 10:41:33 【问题描述】：我正在尝试将 KeyboardAvoidingView 与 behavior="padding" 一起使用。
当我尝试在 TextInput 中输入任何文本时，TextInput 字段没有向上移动。我在最后添加了一个小视图，它正在向上移动，但它上面的视图。
我也有带偏移量的 KeyboardAvoidingView 高度属性。它工作的组件很少，例如 2 个 TextInputs。但是当我添加所有组件时，UI 会变得疯狂并且表现得混乱。
知道这里发生了什么吗？
这里是我遵循的教程的link。
render()
return (
<View style=styles.backgroundContainer>
<Loader
loading=this.state.isLoading />
<KeyboardAvoidingView
keyboardVerticalOffset=10
style=styles.mainContainer
behavior='padding' >
<View style=styles.formContainer>
<View style=[styles.centerContainer, marginTop: 40 ]>
<Image source=require('./../../Resources/logo.png') />
<Text style= fontWeight: 'bold', color: 'gray', fontSize: 25 >AppName</Text>
<Text style=styles.loginMsg> Login to your Account </Text>
</View>
<View style=styles.inputFieldsContainer>
<Image style= width: 30, height: 30, margin: 5 source=require('./../../Resources/logo.png') />
<TextInput
placeholder='Email'
returnKeyType='next'
keyboardType='email-address'
onChangeText=(value) => this.setState( userEmail: value )
onSubmitEditing=() => this.passwordInput.focus()
style=styles.inputFields />
</View>
<View style=styles.inputFieldsContainer>
<Image style= width: 30, height: 30, margin: 5, source=require('./../../Resources/logo.png') />
<TextInput
returnKeyType='go'
secureTextEntry
placeholder='Password'
ref=(input) => this.passwordInput = input
onChangeText=(value) => this.setState( password: value )
style=styles.inputFields />
</View>
<View style=styles.buttonContainer>
<Button
fontSize='8'
color='gray'
title='Remember Me'
onPress=() =>
console.log('Remember Me Clicked');
/>
<Button
color='gray'
title='Forgot Password?'
onPress=() =>
console.log('Forgot Password Clicked');
/>
</View>
<TouchableOpacity
style=styles.buttonLogin
onPress=() =>
console.log('Login Clicked');
>
<Text style= fontSize: 20, fontWeight: 'bold', color: 'white' >Login</Text>
</TouchableOpacity>
<View style= height: 1, backgroundColor: 'gray', marginTop: 20, marginBottom: 1 >
</View>
<View style=[styles.centerContainer, marginBottom: 10 ]>
<Text style=styles.loginMsg>Don't have a Account</Text>
<TouchableOpacity
style=styles.buttonRegister
onPress=() => navigate('Register') >
<Text style=styles.buttonRegisterText>REGISTER NOW</Text>
</TouchableOpacity>
</View>
</View>
<View style= height: 10, backgroundColor: '#628499', >
</View>
</KeyboardAvoidingView>
</View>
);
const styles = StyleSheet.create(
backgroundContainer:
flex: 1, backgroundColor: 'green'
,
mainContainer:
flex: 1, margin: 25,
borderWidth: 1, borderRadius: 5, borderColor: 'gray',
backgroundColor: 'white',
justifyContent: 'space-between'
,
formContainer:
flex: 1, paddingLeft: 25, paddingRight: 25
,
centerContainer:
alignItems: 'center', marginBottom: 10,
,
loginMsg:
margin: 10,
fontSize: 20, color: 'gray'
,
inputFieldsContainer:
flexDirection: 'row', margin: 10,
borderWidth: 1, borderRadius: 5, borderColor: 'gray',
,
inputFields:
flexGrow: 1,
marginTop: 5, marginBottom: 5,
height: 30,
backgroundColor: 'rgba(255,255,255,0.4)',
paddingHorizontal: 10,
,
buttonContainer:
flexDirection: 'row',
justifyContent: 'space-between'
,
buttonLogin:
alignItems: 'center', height: 40, marginTop: 10, marginLeft: 50, marginRight: 50, padding: 5,
backgroundColor: '#2980b9',
borderWidth: 1, borderRadius: 5, borderColor: 'gray'
,
buttonRegister:
alignItems: 'center', height: 40,
marginLeft: 50, marginRight: 50
,
buttonRegisterText:
fontSize: 20, fontWeight: 'bold', color: 'gray'
,
loading:
position: 'absolute',
left: 0, right: 0, top: 0, bottom: 0,
alignItems: 'center', justifyContent: 'center'
, );
【问题讨论】：
View on top 的 ScrollView 实例怎么样 github.com/facebook/react-native/issues/11681 我知道这是一个迟到的评论，但您找到解决方案了吗？目前正面临这个问题。 【参考方案1】：我使用了 KeyboardAvoidingView，它也不起作用。 我找到了这个解决方案，你可以拿基础代码。
安装
npm i react-native-keyboard-aware-scroll-view --save
用法
import KeyboardAwareScrollView from 'react-native-keyboard-aware-scroll-view'
<KeyboardAwareScrollView>
<View>
<TextInput />
</View>
</KeyboardAwareScrollView>
你可以找到它here
【讨论】：
【参考方案2】：<KeyboardAvoidingView
style=styles.mainContainer
behavior="padding"
enabled
>
<View>.......................</View>
</KeyboardAvoidingView>
应添加“启用或禁用 KeyboardAvoidingView”。
【讨论】：
【参考方案3】：请记住，flex:1 始终是您的***父级，然后您的子级就是您的文本输入容器，如果您使用此方法，它始终是其测试方法。
<KeyboardAvoidingView style= flex: 1
behavior=Platform.OS === "ios" ? "position" : null enabled>
<ScrollView>
<View>
<View >
<Text maxFontSizeMultiplier=1.5 >
Sign in to your account" "
</Text>
<View
behavior="padding"
enabled
>
<TextInput
placeholder="Email address"
placeholderTextColor=Colors.grey
style=styles.textInput
onChangeText=(e) => setEmail(e.trim())
autoCapitalize="none"
returnKeyType="done"
/>
</View>
</View>
</ScrollView>
</KeyboardAvoidingView>
【讨论】：
【参考方案4】：它对我有用的方式是使用位置作为行为，使用 -70 作为垂直偏移。当键盘弹出时，任何非负整数都会创建一个巨大的未使用空间。
<KeyboardAvoidingView
style=styles.container
behavior=Platform.OS === 'ios' ? 'position' : 'height'
keyboardVerticalOffset=Platform.OS === 'ios' ? -70 : 70
enabled>
<ScrollView>
...
</ScrollView>
</KeyboardAvoidingView>
【讨论】：
以上是关于React Native KeyboardAvoidingView 无法正常工作的主要内容，如果未能解决你的问题，请参考以下文章
react native 增加react-native-camera
更新 react-native-maps 以使用 create-react-native-app
react native 增加react-native-storage
React-Native 和 Expo：create-react-native-app 和 react-native init 之间的区别
什么是 react-native-cli 和 @react-native-community/cli？
React Native - 当 react-native 版本 > 0.55 时，无法通过 react-native-cli 创建新项目