当键盘弹出时,React原生屏幕大小更改和整个布局缩小

pqwbnv8z  于 2023-10-22  发布在  React
关注(0)|答案(1)|浏览(183)

this is normal layoutthis is whats happening on keyboard pop up
这是布局的代码

import React, { useState, } from 'react'
import { useNavigation, } from '@react-navigation/native'

import { Text, Slider,ButtonGroup, Button, Icon } from '@rneui/themed';

import { View, Image, ScrollView, StyleSheet ,ImageBackground, Pressable,Modal, TextInput, TouchableWithoutFeedback, Keyboard,KeyboardAvoidingView} from "react-native";

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

import Charfeatlist from '../component/Charfeatlist';




const Chargeneration = () => {
  const navigation = useNavigation();

  const [value, setValue] = useState(0);
  const [selectedIndex, setSelectedIndex] = useState(0);

  const [isEditing, setIsEditing] = useState(false);
  const [text, setText] = useState('Name');
  const [editedText, setEditedText] = useState(text);

  const handleEditPress = () => {
    setIsEditing(true);
  };

  const handleSavePress = () => {
    setText(editedText);
    setIsEditing(false);
  };


  return (

   
    <ImageBackground source={require("../assets/bg-low-opasity.png")}
    style={styles.backgroundImage}
  >

<TouchableWithoutFeedback onPress={Keyboard.dismiss}>

      <View style={styles.overlay}>
      
      
              <View style={styles.container}>

                <View style={{ flex:1,borderWidth:2,padding:20,borderColor:'lightblue',paddingTop:25,borderRadius:8,backgroundColor:"lightgrey",alignItems:"center",justifyContent:"center"}}>  
                   
                   <Image
                      style={{flex: 4,width:300,height:400,borderRadius:10}}
                      resizeMode="contain"
                      source={require('../assets/char.png')}
                    />
                  
                    {/* Other content goes here */}
                    <View style={{flex:1,justifyContent:'center',alignItems: 'center',paddingBottom:20}}>
                    <TextInput
            placeholder="Enter text here"
            style={{ borderWidth: 1, borderColor: 'gray', margin: 10 }}
          />
         {/*       {isEditing ? (
        <TextInput
          value={editedText}
          onChangeText={setEditedText}
          autoFocus
          style = {styles.changeName}
          
        />
      ) : (
        <Pressable style= {styles.nameText} onPress={handleEditPress}><Text >{text}</Text></Pressable>
      )} */}
      
            </View>

        </View>  
      </View>
      <View style={styles.saveContainer}>
                 <Button 
                 title="Save"

                 containerStyle={{
                      marginHorizontal: 20,
                      height: 50,
                      width: 150,
                    }}
                    buttonStyle={{
                      backgroundColor: '#ff7400',
                      borderRadius: 100,
                    }}
                    titleStyle={{ fontWeight: 'bold', fontSize: 20 }}
                    loading={false}
              loadingProps={{ size: 'small', color: 'white' }} />
              </View>
             
              
       <Charfeatlist />
    
       </View>
      
     
      </TouchableWithoutFeedback>
      
    </ImageBackground>
   

  )
}

export default Chargeneration

这是上面代码中的字符特征列表ccomponent

import React, { useState, } from 'react'
import { useNavigation } from '@react-navigation/native'

import { Text,Icon, Button, ButtonGroup, BottomSheet, ListItem } from '@rneui/themed';
import { Card } from "@rneui/base";
import { View, Image, ScrollView, StyleSheet, FlatList, TouchableOpacity, TouchableHighlight, Dimensions } from "react-native";
import Svg, { Path } from 'react-native-svg';

import featICONS from './Featicons';
import FeatStylesicons from './FeatStylesicons';
interface CardsData {
  hair: { id: string }[];
  eyes: { id: string }[];
  accesories: { id: string }[];
  cloth: { id: string }[];
}



const Charfeatlist = () => {
  const [isVisible, setIsVisible] = useState(false);
  const [activeLink, setActiveLink] = useState(0);
  const [activeStyle,setActiveStyle] = useState('');

const [activeCardGroup, setActiveCardGroup] = useState('hair');
  
const dataToRender = FeatStylesicons[activeCardGroup];


 

  return (

    <View style={{ flex: 2}}>

      <View style={styles.contentView}>
        <View style={styles.featuresContainer}>
          <FlatList
            data={featICONS}
            
            horizontal
            showsHorizontalScrollIndicator={false}
            keyExtractor={(item) => {
              return item.id;
            }}
            renderItem={({ item ,index}) => <TouchableOpacity style={[styles.features,index === activeLink 
              ? {borderBottomWidth: 1} 
              : {borderBottomWidth: 0}
              ]}
              onPress={() => {
                setActiveLink(index)
                setActiveCardGroup(item.feattype)
             }}>
             
              {item.icon}
            </TouchableOpacity>}
          >

          </FlatList>
        </View>
            
        <View style={styles.buttonsContainer} >
         <FlatList 
              data={dataToRender}
              keyExtractor={(item) => {
                return item.id;
              }}
              showsVerticalScrollIndicator={false}
              contentContainerStyle={{
                
                width:'100%'
             }}
                 numColumns={4}
              renderItem={({ item, index}) => <TouchableOpacity style={[
                styles.styleOptions,
                index === activeStyle ? { borderWidth: 1 } : { borderWidth: 0 },
                (index + 1) % 4 === 0 ? { marginRight: 0 } : { marginRight: 10 },
                index >= item.length - 4 ? { marginBottom: 0 } : { marginBottom: 10 },
              ]}
              onPress={() => {
                setActiveStyle(index);
              }}>
              {item.icon} 
              </TouchableOpacity>}
          ></FlatList>
          
         
        </View>

       

       
      </View>

    </View>

  )
}

export default Charfeatlist

这里发生的事情是屏幕布局或屏幕大小正在收缩当键盘在屏幕上弹出时,当我们按下文本输入.如何使键盘出现在组件的顶部而不是shrnk屏幕大小,以便theykeyboard将覆盖图标容器和保存按钮可能
我已经试过键盘避免查看键盘awarescrollview和他们都没有工作所有这一切都是工作正常的ios上,但只有与android的问题

fhity93d

fhity93d1#

使用keyboard avoiding view来 Package 组件或容器,然后根据键盘的期望行为进行调整
有关详细信息,请参阅文档https://reactnative.dev/docs/keyboardavoidingview

相关问题