我有一个登录页面,其中包含两个<TouchableOpacity>
样式为按钮的按钮,但是当单击它时什么都没有发生(不能单击),我打开检查器,我发现它是用svg包装的。我厌倦了使用zIndex
,但不起作用,这里是鳕鱼:
return (
< View style={styles.container} >
<View style={styles.imageView}>
<Image style={styles.logo} source={require("../assets/qlesse-logo.png")} />
</View>
<Animatable.View
animation="fadeInUpBig"
style={[styles.footer]}
>
<View style={styles.button}>
<Text style={styles.font}>Food for You!</Text>
<TouchableOpacity
onPress={() => navigation.navigate('login')}
style={[styles.signIn, {
backgroundColor: COLORS.primary2,
borderWidth: 1,
marginTop: 15,
}]}
>
<Text style={[styles.textSign, {
color: COLORS.white
}]}>Login</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => navigation.navigate('login')}
style={[styles.signIn, {
borderColor: COLORS.primary2,
borderWidth: 1,
marginTop: 15
}]}
>
<Text style={[styles.textSign, {
color: COLORS.primary2
}]}>Sign Up</Text>
</TouchableOpacity>
</View>
</Animatable.View>
<Svg width={width} height={height / 2} style={styles.svg} viewBox="10 0 360 70"
preserveAspectRatio="xMidYMid meet">
<G transform="translate(0.000000,288.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<Path
d="M1865 2843 c-27 -14 -79 -36 -115 -48 -36 -12 -112 -43 -170 -68
-145 -63 -223 -88 -305 -97 -38 -4 -155 -27 -260 -50 -104 -23 -212 -41 -238
-41 -91 0 -169 68 -198 171 -12 44 -29 65 -98 123 -51 42 -124 38 -301 -17
-78 -24 -143 -46 -145 -48 -2 -2 -11 -551 -20 -1219 -15 -1123 -15 -1222 0
-1288 14 -59 22 -76 48 -95 76 -58 301 -105 652 -137 160 -14 2210 -30 2419
-18 326 19 503 80 606 211 79 99 79 100 62 988 -7 344 -15 826 -19 1071 l-6
446 -41 -9 c-60 -14 -157 -3 -276 31 -131 38 -188 39 -419 6 -186 -27 -207
-32 -397 -88 -145 -43 -233 -53 -339 -38 -165 23 -218 55 -229 138 -13 100
-103 132 -211 76z"
fill={COLORS.black}
stroke={COLORS.black}
/>
</G>
</Svg>
</View >
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: COLORS.primary,
}, logo: {
resizeMode: 'contain',
width: width / 2,
top: 0,
position: 'absolute'
},
imageView: {
justifyContent: 'center',
alignItems: 'center',
top: -230,
},
font: {
fontFamily: "Akaya-Kanadaka",
fontSize: SIZES.h2,
color: COLORS.white,
fontWeight: 'bold'
},
footer: {
flex: Platform.OS === 'ios' ? 3 : 2,
// bottom: 0,
zIndex: 10,
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
paddingHorizontal: 20,
//paddingVertical: 30
},
signIn: {
width: '100%',
height: 40,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 15,
zIndex: 10
},
textSign: {
fontSize: 15,
fontWeight: 'bold',
fontFamily: "Roboto-Bold",
},
button: {
elevation: 8,
zIndex: 10,
top: height / 1.5
},
});
发布于 2021-03-04 21:03:31
检查<TouchableOpacity>
是否从“react本机-手势-处理程序”导入。如果是这样的话,将该导入移到“Reactive-本地”。手势处理程序库需要额外的设置。这表明这些步骤没有正确执行。如果它在其他地方被使用,就修复它。
发布于 2021-03-04 21:29:53
请检查您的进口,它必须是从react本地的,就像这样。
import { TouchableOpacity } from 'react-native';
删除从react本机-手势-处理程序中获取的导入。
如果仍然不工作,然后检查您的父视图有参数pointerEvents=“无”,然后删除它为例。
<View pointerEvents="none" />
https://stackoverflow.com/questions/66486911
复制相似问题