Блог

У меня есть a View , который находится поверх другого View , вверху View есть TouchableOpacity given, но он не работает.

Ниже приведен мой код:

 return (
        <View style={{ flex: 1 }}>
            <View style={styles.backContainer}>
                <View style={styles.backContainerPadded}>
                    <View style={styles.topView}>
                        <View style={styles.topViewFormView}>
                            <TouchableOpacity onPress={() => { navigation.navigate("ChefRegistrationScreen") }}>
                                <View style={styles.continueContainer}>
                                    <Text style={styles.continueText}>CONTINUE</Text>
                                </View>
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>
            </View>
            <View style={styles.bottomView}>
            </View>
        </View>
    );
 

Стили:

 const styles = StyleSheet.create({
    backContainer: {
        flex: 9,
        backgroundColor: "#F6FCF2"
    },
    bottomView: {
        flex: 2,
        backgroundColor: "#7DBC53",
        zIndex: -1,
    },
    backContainerPadded: {
        flex: 1,
        paddingHorizontal: SizeConfig.blockWidth * 4,
    },
    topView: { flex: 4 },
    topViewFormView: {
        flex: 8,
        backgroundColor: "#fff",
        marginBottom: SizeConfig.blockHeight * -14,
        zIndex: 1,
        elevation: 10,
        justifyContent: "flex-end"
    },
    continueContainer: {
        flex: 1,
        backgroundColor: "#000",
        justifyContent: "center",
        alignItems: "center",
        padding: SizeConfig.blockHeight * 2
    },
    continueText: { color: "#FFFFFF" }
})
 

Если я изменю justifyContent: "flex-end" на justifyContent: "flex-start" in topViewFormView , что приведет к CONTINUE переходу на экран, где оно не перекрывает другое представление, но как только оно доходит до места, где оно перекрывается View , TouchableOpacity перестает работать. Я не могу исправить эту проблему ..!!

Попробуйте использовать эти свойства

 topViewFormView: {
    // flex: 8,
    position:"absolute",
    // backgroundColor: "#fff",
    // marginBottom: 50 * -14,
    // zIndex: 10,
    elevation: 10,
    justifyContent: "flex-end",
    bottom:0 
},