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

Question

我正在 React Native 中创建聊天 UI，我希望其中的第一部分（显示消息的地方）应该是可滚动的。

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

UI 类似于 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 上添加了我的代码。

Answer 1

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

The package is called react-native-keyboard-aware-scroll-view. It's a lightweight package with an unpacked size of just 10kB.

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

这是我用来测试你的代码的 link 到 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;

Answer 2

use npm i react-native-keyboard-aware-scroll-view --save import react-native-keyboard-aware-scroll-view

然后..

<KeyboardAwareScrollView
       contentContainerStyle={{
         height: Dimensions.get("window").height * 2.25,
          width: '100%'
           }}
          >

you can change *2.25 to change height

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

TextInput got hides behind keyboard in react-native

user-interface

textinput

react-native

expo

App.js