我正在用 react native 创建聊天界面,我希望第一部分(显示消息的地方)可以滚动。
聊天界面的 TextInput
应该在屏幕底部,键盘应该在它的后面。
这个界面和WhatsApp的聊天界面很相似。但我无法重新创建该界面。
我也试过 KeyboardAvoidingView
从 react-native
但它不像它那样为我工作。
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;
我已经把我的代码添加到了 博览会小食.
当我在工作中遇到这个问题时,我已经多次遇到这个问题。react-native
项目。我总是发现本地的 KeyboardAvoidingView
模块故障。所以我用另一个包来使它工作。我已经在你的 snack
并能正常使用。
这个包叫做
react-native-keyboard-aware-scroll-view
. 它是一个轻量级的包,解压后大小只有10kB。
它有几个有用的道具,你可以用它来调整组件。看看吧 此处.
这里是一个链接到 零食 我用来测试你的代码。
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;