我在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上添加了代码。
2条答案
按热度按时间cclgggtu1#
我在做
react-native
项目的时候遇到过几次这个问题。所以我使用了另一个包来使它工作。我已经在你的snack
上测试过了,它工作得很好。这个软件包名为
react-native-keyboard-aware-scroll-view
。它是一个轻量级软件包,未打包大小仅为10kB。它有几个有用的 prop ,你可以用来调整组件。看看here。
btxsgosb2#
使用npm i react-native-keyboard-aware-scroll-view --保存import react-native-keyboard-aware-scroll-view
然后...
你可以改变 *2.25来改变高度