React Native完成键盘上方的按钮

Question

我想制作＆＃34;完成＆＃34;键盘上方的按钮。

当我点击＆＃34;完成＆＃34;时，键盘将被隐藏。

是否存在库或方法？

感谢。

（我已经找到了一些图书馆 - ＆gt; https://www.npmjs.com/package/react-native-keyboard-done-button但它不起作用）

Answer 1

对于数字和数字键盘：

似乎你不需要任何库 BitmapBuffer^ bmpBuffer = nullptr; // ... get the buffer, use it //((IDisposable^)bmpBuffer)->Dispose(); bmpBuffer->~BitmapBuffer();

对于普通键盘，您可以看一下：

https://github.com/ardaogulcan/react-native-keyboard-accessory

和

https://github.com/douglasjunior/react-native-keyboard-manager

您需要查看Github主题：

https://github.com/facebook/react-native/issues/1190

和

https://github.com/facebook/react-native/issues/641

希望有所帮助

Answer 2

您可以将React-native的KeyboardAvoidingView组件用作

<KeyboardAvoidingView keyboardVerticalOffset={50}>
//View you want to be moved up when keyboard shows.
</KeyboardAvoidingView>

keyboardVerticalOffset={50}是键盘和视图之间的边距，它将是您想要的视图或按钮的高度。我希望有所帮助。

编辑：我认为最好和最可自定义的方式是听取键盘事件，并根据它改变键盘上方所需组件的绝对位置。

从“react-native”导入{..，键盘};

componentDidMount（）{

    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow',(event)=>this.keyboardDidShow(event) );
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide',(event)=>this.keyboardDidHide(event) );
  }

  keyboardDidShow = (event) => {
    //   console.log("keyboard show",event)

        this.setState({keyboardShow:true,keyboardHeight:event.endCoordinates.height}) //<<You got the keyboard height 

  }

  keyboardDidHide = (event) => {
    // console.log("keyboard hide",event)
    this.setState({keyboardShow:false,keyboardHeight:0})
}

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

现在，要将其显示在键盘上方，您可以为按钮组件添加样式，如此

style={{position:"absolute",bottom:this.state.keyboardHegiht+20,right:0}}

如果你想隐藏它（完成按钮），只需使用keyboardShow状态调整jsx。

Answer 3

这不是图书馆或任何特别的。这只是一个随键盘向上移动的视图。

阅读本文 - https://medium.freecodecamp.org/how-to-make-your-react-native-app-respond-gracefully-when-the-keyboard-pops-up-7442c1535580#.gd37tn1wx

它向您展示了使元素尊重键盘的不同方法。

Answer 4

我正在分享处理此案的风格：

代码：

import React from 'react'
import { StyleSheet, Platform, View, Text, KeyboardAvoidingView, Keyboard } from 'react-native';
import { TextInput } from 'react-native-gesture-handler';
export default class StripAboveKeyboard extends React.Component {

    constructor(props) {
        super(props)
        this.state = { keyboardHeight: 0 }
    }

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

    keyboardDidShow = (event) => this.setState({ keyboardShow: true, keyboardHeight: event.endCoordinates.height > 100 ? (Platform.OS == 'ios' ? event.endCoordinates.height : 0) : 0 })
    keyboardDidHide = (event) => this.setState({ keyboardShow: false, keyboardHeight: 0 })

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

    render() {

        marginFromBottom = (this.state.keyboardHeight == 0) ? 0 : this.state.keyboardHeight

        return (
            <KeyboardAvoidingView style={{ flex: 1 }}>
                <View style={style.parent}>
                    <View style={style.upper}>
                        <TextInput style={style.textInput}>User Name</TextInput>
                    </View>
                    <View style={{ ...style.bottomParent, marginBottom: marginFromBottom }}>
                        <Text style={style.bottom}>Press me</Text>
                    </View>
                </View>
            </KeyboardAvoidingView>)
    }
}

const style = StyleSheet.create({
    parent: {
        flex: 1,
        padding: 10,
        backgroundColor: 'pink',
    },

    upper: {
        paddingTop: 44,
        backgroundColor: 'green',
        padding: 10,
        flex: 1,
        marginBottom: 10,
    },

    textInput: {
        height: 40, borderColor: 'gray', borderWidth: 1
    },

    bottomParent: {
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: 'red',
        width: '100%',
        height: 40,
    },

    bottom: {
        textAlignVertical: "center", textAlign: "center",
    }
}) 

屏幕截图：

ANDROID和IOS

Answer 5

“完成”按钮不适用于倍数行DECLARE。要关闭键盘，您必须使用

TextInput

这将有助于通过触摸软键盘的外部来关闭它