在React Native中输入字段时如何在键盘上方设置textinput框

Question

我正在使用本机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组件内设置了键盘感知滚动视图

请澄清

我的示例代码是

<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]

Answer 1

您可以使用 ascrollview并将所有组件放入滚动视图中，然后automaticallyAdjustKeyboardInsets向滚动视图添加属性。它将解决您的问题。

automaticallyAdjustKeyboardInsets控制当键盘更改其大小时，ScrollView 是否应自动调整其 contentInset 和scrollViewInsets。默认值为 false。

    <ScrollView automaticallyAdjustKeyboardInsets={true}>

              {allChildComponentsHere}
             <View style={{ height: 30 }} />//added some extra space to last element
    </ScrollView>

希望能帮助到你。

Answer 2

首先，您不需要任何针对 Android 平台的额外代码。仅将您的输入保存在ScrollView. 只是KeyboardAvoidingView用来封装ScrollViewiOS平台的。

创建一个如下所示的函数，其中包含所有输入

renderInputs = () => {
    return (<ScrollView
        showsVerticalScrollIndicator={false}
        style={{
            flex: 1,
        }}
        contentContainerStyle={{
            flexGrow: 1,
        }}>
        <Text>Enter Email</Text>
        <TextInput
            style={styles.text}
            underlineColorAndroid="transparent"
        />
    </ScrollView>)
}

然后将它们渲染在主视图中，如下所示：

{Platform.OS === 'android' ? (
    this.renderInputs()
) : (
    <KeyboardAvoidingView behavior="padding">
        {this.renderInputs()}
    </KeyboardAvoidingView>
)}

Answer 3

给你的 TextInput 一个 position: absolute 样式并使用由 keyboardDidShow 和 keyboardDidHide 事件返回的高度改变它的位置。

这是 React Native文档中用于演示的键盘示例的修改：

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>;
    }
}

Answer 4

挂钩版本

const [keyboardOffset, setKeyboardOffset] = useState(0);
const onKeyboardShow = event => setKeyboardOffset(event.endCoordinates.height);
const onKeyboardHide = () => setKeyboardOffset(0);
const keyboardDidShowListener = useRef();
const keyboardDidHideListener = useRef();

useEffect(() => {
  keyboardDidShowListener.current = Keyboard.addListener('keyboardWillShow', onKeyboardShow);
  keyboardDidHideListener.current = Keyboard.addListener('keyboardWillHide', onKeyboardHide);

  return () => {
    keyboardDidShowListener.current.remove();
    keyboardDidHideListener.current.remove();
  };
}, []);

Answer 5

您可以按如下方式使用KeyboardAvoidingView

if (Platform.OS === 'ios') {
        return <KeyboardAvoidingView behavior="padding">
            {this.renderChatInputSection()}
        </KeyboardAvoidingView>
    } else {
        return this.renderChatInputSection()
    }

哪里this.renderChatInputSection() 将返回类似用于输入消息的文本输入的视图。希望对你有帮助。

Answer 6

对于android，您可以在文件中android:windowSoftInputMode="adjustResize"设置，因此当键盘显示时，您的屏幕将调整大小，如果您将 放在屏幕底部，它将保持在键盘上方ActivityAndroidManifestTextInput