React Native键盘上方的完成按钮

Question

React Native键盘上方的完成按钮

react-native

26

我希望在键盘上方添加一个“完成”按钮，点击后隐藏键盘。以下是所需按钮的示例图像:

An image demonstrating the desired button

是否有任何现有的方法或库可以实现此功能？（我已经找到了此库，但它不起作用）。

- Hide

5个回答

4

你可以使用React Native的KeyboardAvoidingView组件，例如：

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

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

编辑：我认为最好且最可定制的方法是监听键盘事件，并根据其更改您想要放在键盘上方的组件的绝对位置。

import { Keyboard } from "react-native";
            
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}) // <<You got the keyboard height 
}
        
keyboardDidHide(event) {
  this.setState({keyboardShow:false,keyboardHeight:0})
}
        
componentWillUnmount() {
  this.keyboardDidShowListener.remove();
  this.keyboardDidHideListener.remove();
}

现在，要将它显示在键盘上方，您可以像这样为按钮组件添加样式：

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

如果你想隐藏它（Done 按钮），只需要在 JSX 中使用 keyboardShow 状态进行判断即可。

- Yash Ojha

我已经使用了KeyboardAvoidingView，但是我想把“完成”按钮放在键盘上方。 - Hide

1

我将分享我处理这个案例的方式：

代码：

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",
    }
})