Cara mengklik tombol dibawah komponen scrollview yang transparan?

Jadi saya memiliki kode react-native yang menampilkan sebuah screen yang terdapat scrollView didalamnya, nah scrollView ini posisinya absolute dan juga top serta bottom nya 0. Sehingga kalau di ibaratkan, scrollView ini udah paling atas layernya. Namun dibelakang scrollView terdapat tombol yang harusnya bisa diklik, namun karena terhalang ScrollView absolute, jadinya gakbisa.

Adakah saran agar tombol tersebut bisa diklik dibelakang scrollView yang transparent?

import React, { useEffect, useState } from 'react';
import { Text, View, StatusBar, ScrollView, TouchableOpacity, Dimensions, Button } from 'react-native';

const pageInfo = ({ route, navigation }) => {
    const { height } = Dimensions.get('window')
    const { width } = Dimensions.get('window')

    return (
        <View style={{ flex: 1 }}>
            <StatusBar barStyle='light-content' backgroundColor='transparent' translucent />
            <View style={{ flex: 1, backgroundColor: '#EF2463' }}>
                <View style={{ height: (height / 5) * 1, backgroundColor: '#EF2463', marginTop: (23) }}>
                    <TouchableOpacity onPress={() => {
                        navigation.goBack(null);
                    }}>
                        <View style={{ marginLeft: (27), marginTop: (33), position: 'absolute', zIndex: 1000 }}>
                            <Button title="back"></Button>
                        </View>
                    </TouchableOpacity>
                    <View style={{ marginTop: (66), marginHorizontal: (31), position: 'absolute' }}>
                        <Text style={{ fontFamily: 'Montserrat-Bold', fontSize: (25), lineHeight: (30), color: '#FFFFFF' }}>
                            title
                        </Text>
                    </View>
                </View>
                <ScrollView style={{ position: 'absolute', top: 0, bottom: 0 }} showsVerticalScrollIndicator={false}>
                    <View style={{marginTop: ((height / 5) * 1) + (23)}} ></View>
                    <View style={{ backgroundColor: 'white', height: 900, borderTopLeftRadius: 40, borderTopRightRadius: 40, width: width }}>
                        <View style={{ marginTop: (27), marginHorizontal: (27) }}>
                            <Text style={{ fontFamily: 'Montserrat-Bold', fontSize: (19), lineHeight: (23), color: '#333333' }}>
                                Header Kontet
                            </Text>
                            <Text style={{ fontFamily: 'Montserrat', fontSize: (17), lineHeight: (20), fontWeight: '500', color: '#333333', marginTop: (19), alignItems: 'flex-start', flexWrap: 'wrap' }}>
                                Konten Value
                            </Text>
                        </View>
                    </View>
                </ScrollView>
            </View>
        </View>
    );
};

export default pageInfo;

<a href='https://stackoverflow.com/questions/62273745/how-to-click-the-button-behind-the-scrollview-component'>Postingan asli saya di stackoverflow</a>

avatar craftalpian
@craftalpian

1 Kontribusi 0 Poin

Diperbarui 4 tahun yang lalu

1 Jawaban:

bukankah z-index: 99; di tulis seperti ini

avatar VikSintus
@VikSintus

96 Kontribusi 36 Poin

Dipost 4 tahun yang lalu

Login untuk ikut Jawaban