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

Posted 2023-04-18

【中文标题】TextInput 在 react-native 中隐藏在键盘后面

【英文标题】：TextInput got hides behind keyboard in 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 上添加了我的代码。

【参考方案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;