[英]React Native KeyboardAvoidingView Didn't work if wrapped with ImageBackground
Hello guys I'm currently learning about react native.大家好,我目前正在学习 React Native。 I want to use some Image as a background but when I use BackgroundImage instead of View my KeyboardAvoidingView and TouchableOcapity tag become untouchable.
我想使用一些图像作为背景,但是当我使用 BackgroundImage 而不是 View 时,我的 KeyboardAvoidingView 和 TouchableOcapity 标记变得不可触摸。 (Previously when i use View tag instead of Background image it work perfectly fine).
(以前当我使用视图标签而不是背景图像时,它工作得很好)。 Can someone help me please?
有人能帮助我吗?
const Home = () => {
return (
<ImageBackground style={styles.homeBackground} source={require('../assets/background.png')}>
<View style={styles.homeWrapper}>
<Image style={styles.homeLogo} source={require('../assets/logo.png')}/>
<Text style={styles.homeText}>Hello, Welcome Back!</Text>
<View style={styles.taskItem}>
<Task text={'Interview for Work'} />
<Task text={'Attend Meeting'} />
<Task text={'Go to the Gym !!!!'} />
<Task text={'Prepare for a Date <3'} />
</View>
<KeyboardAvoidingView
behavior={Platform.OS === "Android" ? "padding" : "height"}
style = {styles.writeTaskContainer}
>
<TextInput
style={styles.input}
placeholder={'Write your task'}
/>
<TouchableOpacity >
<View style={styles.ButtonWrapper}>
<Text style={styles.addText}>+</Text>
</View>
</TouchableOpacity>
</KeyboardAvoidingView>
</View>
</ImageBackground>
)
}
My Styles我的 Styles
const styles = StyleSheet.create({
homeBackground: {
zIndex: 1,
width: '100%',
height: '60%',
},
homeWrapper:{
zIndex: 3,
},
}
From my experience, you can fix the issue by adding a view with higher zIndex to enclose the elements which are covered by other elements.根据我的经验,您可以通过添加具有更高 zIndex 的视图来包含被其他元素覆盖的元素来解决此问题。
Hence please change the following block:因此,请更改以下块:
<KeyboardAvoidingView
behavior={Platform.OS === "Android" ? "padding" : "height"}
style = {styles.writeTaskContainer}
>
<TextInput
style={styles.input}
placeholder={'Write your task'}
/>
<TouchableOpacity >
<View style={styles.ButtonWrapper}>
<Text style={styles.addText}>+</Text>
</View>
</TouchableOpacity>
</KeyboardAvoidingView>
to至
<View style={{zIndex:10000}}>
<KeyboardAvoidingView
behavior={Platform.OS === "Android" ? "padding" : "height"}
style = {styles.writeTaskContainer}
>
<TextInput
style={styles.input}
placeholder={'Write your task'}
/>
<TouchableOpacity >
<View style={styles.ButtonWrapper}>
<Text style={styles.addText}>+</Text>
</View>
</TouchableOpacity>
</KeyboardAvoidingView>
</View>
Please let me know the result.请让我知道结果。 Thanks
谢谢
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.