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的问题
1条答案
按热度按时间fhity93d1#
使用keyboard avoiding view来 Package 组件或容器,然后根据键盘的期望行为进行调整
有关详细信息,请参阅文档https://reactnative.dev/docs/keyboardavoidingview