22.React Native避免键盘对TextInput遮挡一

目录

1.KeyboardAvoidingView

2.react-native-keyboard-aware-scroll-view

3.Keyboard Module

4.QQ聊天示例

4.1实现类似QQ聊天效果,点击输入框以后可以继续停留在未弹出键盘的位置;

4.2键盘显示或隐藏总是滚到底部 


键盘遮挡

在开发中难免会用于(TextInput)输入框,可能会遇到键盘遮挡TextInput的情况,效果图:

   

示例代码:

render(){
        return (<View style={styles.container}>
            <Text style={
  {height:150,textAlignVertical:'center'}}>键盘遮挡</Text>
            <TextInput ref="username1"
                       autoCapitalize='none' //设置首字母不自动大写
                       placeholder={'请输入账号1'}//提示语
                       style={styles.textInputStyle}
                        />
            <TextInput ref="username2"
                       autoCapitalize='none' //设置首字母不自动大写
                       placeholder={'请输入账号2'}//提示语
                       style={styles.textInputStyle}
            />
            <TextInput ref="username3"
                       autoCapitalize='none' //设置首字母不自动大写
                       placeholder={'请输入账号3'}//提示语
                       style={styles.textInputStyle}
            />
            <TextInput ref="username4"
                       autoCapitalize='none' //设置首字母不自动大写
                       placeholder={'请输入账号4'}//提示语
                       style={styles.textInputStyle}
            />
            <TextInput ref="username5"
                       autoCapitalize='none' //设置首字母不自动大写
                       placeholder={'请输入账号5'}//提示语
                       style={styles.textInputStyle}
            />
            <TextInput ref="username6"
                       autoCapitalize='none' //设置首字母不自动大写
                       placeholder={'请输入账号6'}//提示语
                       style={styles.textInputStyle}
            />
        </View>);
    }
}

let styles = StyleSheet.create({
    container:{
        flex: 1,
        justifyContent: 'center',
        alignItems:'center',
        backgroundColor:'#0ff'
    },
    textInputStyle:{height:50, width:'90%',backgroundColor:'#fff',marginTop:10, borderRadius:10}
});

介绍几种解决键盘遮挡问题的方法

1.KeyboardAvoidingView

本组件用于解决一个常见的尴尬问题:手机上弹出的键盘常常会挡住当前的视图。本组件可以自动根据键盘的位置,调整自身的 height 或底部的 padding,以避免被遮挡。

用法:

import { KeyboardAvoidingView } from 'react-native';
<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
  ... 在这里放置需要根据键盘调整位置的组件 ...
</KeyboardAvoidingView>

关键参数说明:

behavior:参数表示怎样显示键盘;
注意:Android 和 iOS 在此属性上表现并不一致。 Android 可能不指定此属性更好,而 iOS 可能相反。
通过测试behavior设置为padding基本满足需求的;

我们可以看到通过KeyboardAvoidingView包裹输入框以后基本可以满足需要了;

render(){
        return (<KeyboardAvoidingView style={styles.container}
                                      behavior= 'padding'>
            <Text style={
  {height:150,textAlignVertical:'center'}}>键盘遮挡</Text>
            <TextInput ref="username1"
                       autoCapitalize='none' //设置首字母不自动大写
                       placeholder={'请输入账号1'}//提示语
                       style={styles.textInputStyle}
                        />
            <TextInput ref="username2"
                       autoCapitalize='none' //设置首字母不自动大写
                       placeholder={'请输入账号2'}//提示语
                       style={styles.textInputStyle}
            />
            <TextInput ref="username3"
                       autoCapitalize='none' //设置首字母不自动大写
                       placeholder={'请输入账号3'}//提示语
                       style={styles.textInputStyle}
            />
            <TextInput ref="username4"
                       autoCapitalize='none' //设置首字母不自动大写
                       placeholder={'请输入账号4'}//提示语
                       style={styles.textInputStyle}
            />
            <TextInput ref="username5"
                       autoCapitalize='none' //设置首字母不自动大写
                       placeholder={'请输入账号5'}//提示语
                       style={styles.textInputStyle}
            />
            <TextInput ref="username6"
                       autoCapitalize='none' //设置首字母不自动大写
                       placeholder={'请输入账号6'}//提示语
                       style={[styles.textInputStyle, {marginBottom:50}]}
            />
            <Text style={[styles.textInputStyle, {textAlign:'center', textAlignVertical:'center'}]}>登录</Text>
        </KeyboardAvoidingView>);
    }

通过效果图我们会发现一个问题,视图是被直接顶上去了,显示在视图之外,界面无法滚动;

针对 Android 开发者:我发现这种方法是处理这个问题最好,也是唯一的办法。在 AndroidManifest.xml 
中添加 android:windowSoftInputMode="adjustResize"。操作系统将为你解决大部分的问题,
KeyboardAvoidingView 会为你解决剩下的问题。参见https://gist.github.com/spencercarli/e1b9575c1c8845c2c20b86415dfba3db#file-
androidmanifest-xml-L23这个。

2.react-native-keyboard-aware-scroll-view

一个ScrollView组件,用于处理键盘外观并自动滚动到焦点文本输入。

您可以

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React Native 中,当键盘弹出时,会遮挡住输入框,这是一个常见的问题。你可以通过以下几种方式来解决: 1. 使用 KeyboardAvoidingView 组件 React Native 提供了 KeyboardAvoidingView 组件,可以自动调整页面的布局,以避免键盘遮挡输入框。你可以将输入框放在 KeyboardAvoidingView 组件中,然后设置 behavior 属性来控制布局的调整方式。例如: ``` import { KeyboardAvoidingView, TextInput } from 'react-native'; <KeyboardAvoidingView behavior={'padding'} style={{ flex: 1 }}> <TextInput style={{ height: 40, borderColor: 'gray', borderWidth: 1 }} /> </KeyboardAvoidingView> ``` 2. 使用 ScrollView 组件 如果页面上有多个输入框,你可以将它们放在一个 ScrollView 组件中,并在键盘弹出时滚动到当前输入框的位置上。你可以使用 scrollTo 方法来实现这个功能。例如: ``` import { ScrollView, TextInput } from 'react-native'; class MyComponent extends React.Component { constructor(props) { super(props); this.state = { inputHeight: 40, }; this.scrollView = React.createRef(); this.textInput = React.createRef(); } componentDidMount() { this.keyboardDidShowListener = Keyboard.addListener( 'keyboardDidShow', this.keyboardDidShow ); this.keyboardDidHideListener = Keyboard.addListener( 'keyboardDidHide', this.keyboardDidHide ); } componentWillUnmount() { this.keyboardDidShowListener.remove(); this.keyboardDidHideListener.remove(); } keyboardDidShow = (event) => { const keyboardHeight = event.endCoordinates.height; const scrollResponder = this.scrollView.current.getScrollResponder(); const inputHandle = ReactNative.findNodeHandle(this.textInput.current); const inputPosition = this.state.inputHeight + 10; scrollResponder.scrollResponderScrollNativeHandleToKeyboard( inputHandle, inputPosition, true ); }; keyboardDidHide = () => { const scrollResponder = this.scrollView.current.getScrollResponder(); scrollResponder.scrollResponderScrollTo({ x: 0, y: 0, animated: true, }); }; render() { return ( <ScrollView ref={this.scrollView} keyboardDismissMode="interactive" contentContainerStyle={{ flexGrow: 1 }} > <TextInput ref={this.textInput} style={{ height: this.state.inputHeight }} onFocus={() => this.setState({ inputHeight: 100 })} onBlur={() => this.setState({ inputHeight: 40 })} /> <TextInput ref={this.textInput} style={{ height: this.state.inputHeight }} onFocus={() => this.setState({ inputHeight: 100 })} onBlur={() => this.setState({ inputHeight: 40 })} /> </ScrollView> ); } } ``` 在上面的例子中,我们使用 ScrollView 组件包裹了两个 TextInput 组件,并且在 KeyboardDidShow 和 KeyboardDidHide 事件中,调用了 ScrollView 组件的 scrollTo 方法来滚动到当前输入框的位置上。 以上是两种比较常用的解决方法,你可以根据具体的场景选择适合自己的方式来解决问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值