реагировать на родную позицию абсолют скрывает текст - PullRequest
Новая
       4

реагировать на родную позицию абсолют скрывает текст

1 голос
/ 25 марта 2020

после того, как попробовал почти все из стека overoverflow, 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, но не повезло

(тестирование на эмуляторе android)

1 Ответ

2 голосов
/ 25 марта 2020

Попробуйте этот код и используйте TouchableOpacity из react-native вместо 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

enter image description here

...