Question

我试图查看是否可以在键盘顶部添加一个按钮，我在许多应用程序中都已看到此功能，但不确定在expo和react-native上是否可以使用。该按钮应与键盘一起出现，并且在按下或键盘消失时不可见。我放置了一个示例类，该类与添加的图像

一起使用

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

export default class test extends Component {
constructor(props) {
super(props);
 this.state = {
  a: props.navigation,
  b: '',
 }
}

componentWillMount() {

  }


render() {
return (
  <View style={styles.container}>
    <TextInput
      style={{marginTop: 300,marginLeft: 50,borderWidth: 1}}
    placeholder="type"
    />
  </View>
 );
}
}

const styles = StyleSheet.create({
container: {
  flex: 1,
  paddingTop: 22,
  backgroundColor: '#42444f',
},

});

Answer 1

尝试这种方法

constructor(props)
{
   super(props)
   this.state = {
     buttonVisible: false // add this state. this state is the flag for button appearance
   }
}

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

 _keyboardDidShow = () => {
    this.setState({
      buttonVisible: true
    })
  }

  _keyboardDidHide = () => {
    this.setState({
      buttonVisible: false
    })
  }

render() {
return (
  <View style={styles.container}>
    <View style={{ flex: 4 }}>
       <TextInput
         style={{marginTop: 300,marginLeft: 50,borderWidth: 1}}
       placeholder="type"
       />
     </View>
    <View style={{ flex: 1 }}>
      {this.state.buttonVisible ? <TouchableOpacity style={{ flex: 1, backgroundColor: 'red', justifyContent: 'center', alignItems: 'center' }}><Text>Button</Text></TouchableOpacity> : <View/>}
    </View>
  </View>
 );
}

根据buttonVisible状态值（在componentDidMount中初始化的键盘事件监听器内部更改的状态），按钮将可见。

Answer 2

检查此链接

react-native-keyboard-accessory

和

React-Native Keyboard Manager

我希望这可以帮助您找到方法。

调用时在键盘上方添加一个按钮

2 个答案: