所以我已经创建了一个表单,它是在同一个地方的按钮。我希望窗体在单击按钮时出现,在单击十字按钮时消失。我得到的问题是zindex-1对我不起作用,窗体与按钮重叠,因此每当我尝试单击其中一个按钮时,窗体就会被单击(即使它不可见)。我做了一些研究,显然zindex已经在react v17和更高版本中修改过,我也尝试过使用elevation,但也不起作用。
依赖关系:
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Dimensions,TextInput, Pressable } from 'react-native';
import styles from './styles';
import Svg, { Image, Ellipse, ClipPath } from 'react-native-svg';
import Animated, {useSharedValue, useAnimatedStyle, interpolate, withTiming, withDelay,
color} from 'react-native-reanimated';
表单编码:
<Animated.View style={[styles.inputformcontainer, formAnimatedStyle ]}>
<TextInput placeholder="Email"
placeholderTextColor="#9b1306"
style={styles.textinput}/>
<TextInput placeholder="Full Name"
placeholderTextColor="#9b1306"
style={styles.textinput}/>
<TextInput placeholder="Password"
placeholderTextColor="#9b1306"
style={styles.textinput}/>
<View style = {styles.formButton}>
<Text style={styles.buttontext}> LOG IN </Text>
</View>
</Animated.View>
使用的功能
const formAnimatedStyle = useAnimatedStyle(() => {
return{
opacity : imagePosition.value === 0 ? withDelay(400,withTiming(1,{duration:800})) : withTiming(0,{duration: 300})
}
})
CSS:
inputformcontainer:{
backgroundColor:'grey',
color: '#000',
marginBottom: 70,
justifyContent : "center",
zindex: -1,
...StyleSheet.absoluteFill,
}
1条答案
按热度按时间5w9g7ksd1#
要在CSS中使用
z-index
,需要声明元素的position
。最简单的方法是在CSS中添加position: relative
(除非StyleSheet.absoluteFill
中有另一个position
属性)。而且,我不知道你使用的CSS是什么,但我看到
zindex
不是 Camel 大小写。所以你的问题可能是打字错误。使用zIndex
代替。试试这个: