ضحی یوسفی
3 سال پیش توسط ضحی یوسفی مطرح شد
0 پاسخ

برنامه نویسی react native

با سلام
من قصد دارم یک اپ اندروید با 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%",  
}}

> &lt;VStack left={0} bg="#fff" &gt;  
> {messagearry.map((val) =&gt; {  
> if (val.T == "user") {  
> return (  
> &lt;Center maxW="60%" rounded={20} p={4} bg="#e4d3ee" my={5} mb={3} align="flex-end" left="38%" right={2} &gt;  
> &lt;Text flex={1}&gt; {val.M} &lt;/Text&gt;  
> &lt;/Center&gt;

                                )
                            } 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;

ثبت پرسش جدید

به همدیگه کمک کنیم

به ضحی یوسفی کمک کنید تا مشکل خودش را حل کند؛ این‌طور می‌توانیم با هم پیشرفت کنیم.

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام