با سلام
من قصد دارم یک اپ اندروید با react native , native base و Expo طراحی کنم که در یکی از صفحات برنامه لازم هست که یک صفحهی چت طراحی بشه ، در استفاده از کیبورد توی این صفحه چت به مشکل برخورد کردم ، مشکل این هست که وقتی کیبورد بالا میاد تنظیمات صفحه کاملا بهم میخوره و حتی هدر صفحه هم به سمت بالا (بیرون صفحه) حرکت میکنه
برای حل این مشکل سرچ زیادی انجام دادم اما هیچ کدوم از روش ها توی برنامه ی من به حل مشکل کمک نکرده
آیا کسی میتونه توی حل این مشکل راهنمایی کنه ؟
اینم همکد صفحهی چت هست :
import React, { Component } from 'react';
import { Pressable } from "react-native"
import {
NativeBaseProvider,
StatusBar,
VStack,
HStack,
Center,
Menu,
Divider,
HamburgerIcon,
Text,
ScrollView,
TextArea,
Button,
Box,
Icon,
Image,
} from 'native-base';
import { reply, alternative, trigger } from "./dataset";
import { Generateresponses } from './Generate responses';
import { AntDesign } from '@expo/vector-icons';
export var messagearry = \[\];
class PageaChat extends Component {
gr = new Generateresponses()
constructor(props) {
super(props);
this.state = {
Inputtxt: "",
arrystate: false,
InputState: false,
hightscroll: "83%",
imenu: 0
};
}
render() {
const { navigation } = this.props;
return (
<NativeBaseProvider >
<VStack flex={1} w="100%" >
<StatusBar backgroundColor="#724878" />
<HStack h="8%" bgColor="#955e9e" alignItems="center" >
<Image
size={60}
resizeMode="cover"
source={require('F:/Course/react native/my-app/Image/2.png')}
alt={"Alternate Text " + 50}
/>
<Image
w="60%"
h="70%"
left="30%"
resizeMode="cover"
source={require('F:/Course/react native/my-app/Image/name.png')}
alt={"Alternate Text " + 50}
/>
<Menu
trigger={(triggerProps) => {
return (
<Pressable accessibilityLabel="More options menu" {...triggerProps}
left="90%" top={0}>
<HamburgerIcon />
</Pressable>
)
}}
>
<Menu.Item key={1024} onPress={() => {
messagearry = []
this.setState({
arrystate: false,
})
}} >پاک کردن پیام ها</Menu.Item>
<Menu.Item key={this.state.imenu + 2} onPress={() => {
this.setState({
arrystate: false,
})
navigation.navigate('sign')
messagearry = []
}}>تغییر نام</Menu.Item>
<Divider />
<Menu.Item key={this.state.imenu + 3} onPress={() => {
this.setState({
arrystate: false,
})
navigation.navigate('start')
messagearry = []
}}>خروج</Menu.Item>
</Menu>
</HStack>
<VStack h={this.state.hightscroll}>
<ScrollView
bg="#fff"
w="100%"
contentContainerStyle={{
bg: "#ffff",
w: "100%",
}}
> <VStack left={0} bg="#fff" >
> {messagearry.map((val) => {
> if (val.T == "user") {
> return (
> <Center maxW="60%" rounded={20} p={4} bg="#e4d3ee" my={5} mb={3} align="flex-end" left="38%" right={2} >
> <Text flex={1}> {val.M} </Text>
> </Center>
)
} else {
return (
<Center maxW="60%" rounded={20} p={4} bg="#e1fcec" my={5} mb={3} left={2}>
{val.M}
</Center>)
}
})}
</VStack>
</ScrollView>
</VStack>
<HStack h="9%" bgColor="#fff" >
<TextArea h={12}
w="85%"
top={1}
left={2}
rounded={15}
borderColor="#955e9e"
multiline={true}
numberOfLines={5}
placeholder="متن خود را وارد کنید"
value={this.state.Inputtxt}
_focus={{ borderColor: "#955e9e" }}
onChangeText={(txt) => {
this.setState({
Inputtxt: txt
})
}}
/>
<Button
w={45}
h={49}
bg="#955e9e"
top={1}
Bottom={2}
left={3}
rounded={60}
startIcon={<Icon as={AntDesign} name="doubleright" size="xs" />}
_pressed={{ bg: "#967499" }}
onPress={() => {
if (this.state.Inputtxt != "") {
var temp = this.state.Inputtxt
messagearry.push({ T: "user", M: temp })
this.setState({
Inputtxt: "",
arrystate: true,
})
var chr = this.gr.comparee(trigger, reply, temp)
messagearry.push({ T: "bot", M: chr })
}
}}></Button>
</HStack>
</VStack >
</NativeBaseProvider >
);
}
}
export default PageaChat;
به ضحی یوسفی کمک کنید تا مشکل خودش را حل کند؛ اینطور میتوانیم با هم پیشرفت کنیم.
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟