TextInput прячется за клавиатурой в react-native - PullRequest
Новая
       38

TextInput прячется за клавиатурой в react-native

0 голосов
/ 26 мая 2020
• 1000 после этого.

Пользовательский интерфейс похож на экран чата WhatsApp. Но я не могу воссоздать этот интерфейс.

Я также пробовал KeyboardAvoidingView из react-native, но у меня это не работает так, как работает.

Приложение. js

import React, { useEffect, useState } from "react";
import {
  ScrollView,
  View,
  Text,
  Alert,
  Dimensions,
  Platform,
  KeyboardAvoidingView,
  TextInput,
  TouchableOpacity,
} from "react-native";

import { Ionicons } from "@expo/vector-icons";

const App = () => {
  const [message, setMessage] = useState([]);

  
  return (
    <View
      style={{
        display: "flex",
        flex: 1,
        justifyContent: "space-evenly",
        alignItems: "center",
        height: Dimensions.get("window").height,
        width: Dimensions.get("window").width,
      }}
    >
      <View
        style={{
          height: Dimensions.get("window").height * 0.8,
          backgroundColor: "lightgrey",
          width: Dimensions.get("window").width,
        }}
      >
        <ScrollView></ScrollView>
      </View>
      <View
        style={{
          height: Dimensions.get("window").height * 0.2,
          width: Dimensions.get("window").width,
          display: "flex",
          flexDirection: "row",
          justifyContent: "space-evenly",
          alignItems: "center",
          padding: 25,
        }}
      >
        <View style={{ flex: 4 }}>
          <TextInput placeholder="Type Message ....." />
        </View>
        <TouchableOpacity>
          <Ionicons name="md-send" size={30} color="#0af" />
        </TouchableOpacity>
      </View>
    </View>
  );
};

export default App;

Я добавил свой код на expo snake .

1 Ответ

1 голос
/ 26 мая 2020

Я сталкивался с этой проблемой несколько раз, работая над проектами react-native. Всегда нахожу глючным родной модуль KeyboardAvoidingView. Поэтому я использую другой пакет, чтобы он работал. Я тестировал его на вашем snack, и он отлично работает.

Пакет называется react-native-keyboard-aware-scroll-view. Это легкий пакет с распакованным размером всего 10 КБ.

Он имеет несколько полезных свойств, которые вы можете использовать для настройки компонента. Посмотрите здесь .

Вот ссылка на снек , который я использовал для проверки вашего кода. 

import React, { useEffect, useState } from "react";
import {
  ScrollView,
  View,
  Text,
  Alert,
  Dimensions,
  Platform,
  TextInput,
  TouchableOpacity,
} from "react-native";
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'


import { Ionicons } from "@expo/vector-icons";

const App = () => {
  const [message, setMessage] = useState([]);


  return (
    <KeyboardAwareScrollView
      style={{
        display: "flex",
        flex: 1,
        justifyContent: "space-evenly",
        alignItems: "center",
        height: Dimensions.get("window").height,
        width: Dimensions.get("window").width,
      }}
    >
      <View
        style={{
          height: Dimensions.get("window").height * 0.8,
          backgroundColor: "lightgrey",
          width: Dimensions.get("window").width,
        }}
      >
        <ScrollView></ScrollView>
      </View>
      <View
        style={{
          height: Dimensions.get("window").height * 0.2,
          width: Dimensions.get("window").width,
          display: "flex",
          flexDirection: "row",
          justifyContent: "space-evenly",
          alignItems: "center",
          padding: 25,
        }}
      >
        <View style={{ flex: 4 }}>
          <TextInput placeholder="Type Message ....." />
        </View>
        <TouchableOpacity>
          <Ionicons name="md-send" size={30} color="#0af" />
        </TouchableOpacity>
      </View>
    </KeyboardAwareScrollView>
  );
};

export default App;
...