显示键盘反应原生时隐藏底部图像视图 [英] Hide the bottom image view when showing keyboard react-native

问题描述

如何隐藏这张图片...感谢您的帮助！

How I can hide this picture... Thank you for any help!

推荐答案

你可以在 ReactNative 中使用 Keyboard监听键盘的变化并在键盘可见时隐藏您的图像.

You can use Keyboard in ReactNative to listen for changes of keyboard and hide your image when the keyboard is visible.

检查下面的示例代码

import * as React from "react";
import { View, Keyboard, TextInput, Image } from "react-native";

export default class App extends React.Component {
  state = {
    isKeyboadVisible: false,
    text: ""
  };

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

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

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

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

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <TextInput
          style={{
            height: 40,
            width: "80%",
            borderColor: "red",
            borderWidth: 1,
            marginBottom: 10
          }}
          onChangeText={text => this.setState({ text })}
          value={this.state.text}
        />
        {!this.state.isKeyboadVisible && (
          <Image
            style={{ width: 100, height: 100 }}
            source={{ uri: "https://reactnative.dev/img/tiny_logo.png" }}
          />
        )}
      </View>
    );
  }
}

根据您的要求更改上述代码.

Change the above code according to your requirements.

希望对你有帮助.如有疑问，请随意.

Hope this helps you. Feel free for doubts.

这篇关于显示键盘反应原生时隐藏底部图像视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！