TextInput 在 react-native 中隐藏在键盘后面答案

【问题标题】：TextInput got hides behind keyboard in react-nativeTextInput 在 react-native 中隐藏在键盘后面
【发布时间】：2020-09-13 07:17:43
【问题描述】：

我在 react native 中创建聊天 UI，我希望第一部分（显示消息的位置）应该是可滚动的。

TextInput 应该在屏幕底部，键盘应该在它之后。

用户界面类似于 WhatsApp 聊天屏幕。但我无法重新创建该 UI。

我也从react-native 尝试过KeyboardAvoidingView，但它对我不起作用。

App.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 snack 上添加了我的代码。

【问题讨论】：

标签： react-native user-interface expo textinput

【解决方案1】：

我在处理react-native 项目时多次遇到这个问题。我总是发现原生的KeyboardAvoidingView 模块有问题。所以我使用另一个包来使它工作。我已经在您的 snack 上对其进行了测试，并且效果很好。

包名为react-native-keyboard-aware-scroll-view。它是一个轻量级的包，解压后大小仅为 10kB。

它有几个有用的道具可以用来调整组件。看看here。

这是我用来测试您的代码的snack 的链接。

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;

【讨论】：