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

zqdjd7g9  于 2023-03-31  发布在  React
关注(0)|答案(2)|浏览(162)

我在react native中创建聊天UI,我希望第一部分(显示消息的地方)应该是可滚动的。
TextInput应该在屏幕底部,键盘应该在它后面。
该UI类似于WhatsApp聊天屏幕.但我无法重新创建该UI.
我也试过react-nativeKeyboardAvoidingView,但它不适合我。

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上添加了代码。

cclgggtu

cclgggtu1#

我在做react-native项目的时候遇到过几次这个问题。所以我使用了另一个包来使它工作。我已经在你的snack上测试过了,它工作得很好。
这个软件包名为react-native-keyboard-aware-scroll-view。它是一个轻量级软件包,未打包大小仅为10kB。
它有几个有用的 prop ,你可以用来调整组件。看看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;
btxsgosb

btxsgosb2#

使用npm i react-native-keyboard-aware-scroll-view --保存import react-native-keyboard-aware-scroll-view
然后...

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

你可以改变 *2.25来改变高度

相关问题