react-native – 如何在反应原生中输入输入字段时在键盘上方设置

发布时间：2020-12-15 05:04:44 所属栏目：百科来源：网络整理

导读：我正在使用react-native TextInput组件.如果用户单击textInput字段,我需要在键盘上方显示InputBox. 我在下面试过,但我正面临着这些问题 1.键盘避开视图 a. Here it shows some empty space below the input box b. Manually I need to scroll up the screen

我正在使用react-native TextInput组件.如果用户单击textInput字段,我需要在键盘上方显示InputBox.

我在下面试过,但我正面临着这些问题

1.键盘避开视图

a. Here it shows some empty space below the input box 
 b. Manually I need to scroll up the screen to see the input field which I was given in the text field
 c. Input box section is hiding while placing the mouse inside the input box

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

a.It shows some empty space below the input box
b.ScrollView is reset to the top of the page after I moving to the next input box

在这里,我在ScrollView组件中设置了Keyboard-aware-scroll-view

请澄清一下

我的示例代码是

<SafeAreaView>
<KeyboardAvoidingView>
<ScrollView>        
        <Text>Name</Text>
            <AutoTags
            //required
             suggestions={this.state.suggestedName}
             handleAddition={this.handleAddition}
             handleDelete={this.handleDelete}
             multiline={true}
             placeholder="TYPE IN"
             blurOnSubmit={true}
             style= {styles.style}
             />
</ScrollView>   
</KeyboardAvoidingView>
</SafeAreaView>

[https://github.com/APSL/react-native-keyboard-aware-scroll-view]

为TextInput提供一个位置：绝对样式并使用keyboardDidShow和keyboardDidHide事件返回的高度更改其位置.

以下是React Native documentation中用于演示的键盘示例的修改：

import React,{ Component } from 'react';
import { Keyboard,TextInput } from 'react-native';

class Example extends Component {
    state = {
        keyboardOffset: 0,};

    componentDidMount() {
        this.keyboardDidShowListener = Keyboard.addListener(
            'keyboardDidShow',this._keyboardDidShow,);
        this.keyboardDidHideListener = Keyboard.addListener(
            'keyboardDidHide',this._keyboardDidHide,);
    }

    componentWillUnmount() {
        this.keyboardDidShowListener.remove();
        this.keyboardDidHideListener.remove();
    }

    _keyboardDidShow(event) {
        this.setState({
            keyboardOffset: event.endCoordinates.height,})
    }

    _keyboardDidHide() {
        this.setState({
            keyboardOffset: 0,})
    }

    render() {
        return <View style={{flex: 1}}>
            <TextInput
                style={{
                    position: 'absolute',width:    '100%',bottom:   this.state.keyboardOffset,}}
                onSubmitEditing={Keyboard.dismiss}
            />
        </View>;
    }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!