反应本机位置绝对是隐藏文本

Question

在尝试了 Whosebug 中的几乎所有内容后，github我无法解决此问题给出位置后：'absolute' 我的文字被隐藏了，那是我的代码

    import React from 'react'
import { View, Text, StyleSheet } from 'react-native'
import { TouchableOpacity } from 'react-native-gesture-handler'
import { Icon } from 'react-native-vector-icons/FontAwesome';

const userMain = () => {
    return (
        <View style={styles.container}>
            <Text>user homepage here</Text>
            <TouchableOpacity style={styles.btn}>
                <Text style={styles.btnText}> Text </Text> 
            </TouchableOpacity>
        </View>
    )
}
const styles = StyleSheet.create({
    container: {
        position:'relative',
        alignItems: 'center',
        flex: 1,
        justifyContent: 'center',
    },
    btn: {
        width: null, height:null, zIndex: 0, position: 'absolute',  top: 0, bottom:0, left:0, right:0
    },
    btnText: {
        fontSize: 50,
        color: 'black',
        zIndex:99
    }

})

export default userMain

我也给了父容器相对位置，也尝试了 zindex 但没有成功

(testing on android emulator)

Answer 1

尝试此代码并使用 react-native 中的 TouchableOpacity 而不是 react-native-gesture-handler

import React from 'react'
import { View, Text, StyleSheet,TouchableOpacity } from 'react-native'
//import { TouchableOpacity } from 'react-native-gesture-handler'
import { Icon } from 'react-native-vector-icons/FontAwesome';

const userMain = () => {
    return (
        <View style={styles.container}>
            <Text>user homepage here</Text>
            <TouchableOpacity style={styles.btn}>
                <Text style={styles.btnText}> Text </Text> 
            </TouchableOpacity>
        </View>
    )
}
const styles = StyleSheet.create({
    container: {
        position:'relative',
        alignItems: 'center',
        flex: 1,
        justifyContent: 'center',
    },
    btn: {
        width: null, height:null, zIndex: 0, position: 'absolute',  top: 0, bottom:0, left:0, right:0
    },
    btnText: {
        fontSize: 50,
        color: 'black',
        zIndex:99
    }

})

export default userMain

反应本机位置绝对是隐藏文本

react native position absolute is hiding the text

react-native

react-native-android