Скрыть отображение нижнего изображения при отображении реакции клавиатуры

Question

Как мне скрыть эту фотографию ... Спасибо за любую помощь!

Answer 1

@ Trần Tùng , вместо того, чтобы скрывать вид изображения, вы используете ScrollView, который автоматически настраивает вид изображения, и работа экрана будет в порядке. вот ссылка на официальные документы. https://reactnative.dev/docs/0.39/scrollview

Answer 2

Вам нужно использовать ScrollView, чтобы обернуть ваш вид. Поэтому, когда вы нажимаете для ввода компонента, клавиатура будет перекрывать ваше изображение. https://reactnative.dev/docs/using-a-scrollview#__docusaurus

Другое решение - попытаться использовать KeyboardAvoidingView https://reactnative.dev/docs/keyboardavoidingview

Answer 3

Вы можете использовать Клавиатура в ReactNative, чтобы прослушивать изменения клавиатуры и скрывать свое изображение, когда клавиатура видна.

проверьте приведенный ниже пример кода

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

Измените приведенный выше код в соответствии с вашими требованиями.

Надеюсь, это вам поможет. Не стесняйтесь сомнений.