Реагировать на отзывчивый вид Iphone x

Question

Я сталкиваюсь с небольшой проблемой при стилизации для Iphone X, я использовал widthPercentageToDP и heightPercentageToDP из Reaction-native-Response-Screen, чтобы сделать вид похожим, в большинстве устройств он работал отлично, кроме Iphone X, разница немногонемного, но я хочу сделать вид максимально точным.

  <View style={styles.container}>
                <ImageBackground source={require('../../assets/acc.png')} style={styles.bgImg}>
                    <View style={styles.headerView}>
                    <FontAwesome style={styles.setting}  name="cog" size={hp('4%')} color="#6B6466" />
                    <Text style={styles.headerText}>My Account</Text>
                    </View >

                    <View style={styles.imgView} >
                        <Image source={require('../../assets/user.png')} style={styles.accImg}/>
                        <Text style={styles.name}> John doe</Text>
                        <Text style={styles.number}> 123456789</Text>
                    </View>
                    <View style={styles.bottomView}>
                    <View style={styles.bottomView2}>

                        <TouchableOpacity style={styles.inboxView}>
                            <Text style={styles.inboxNumber}>12</Text>
                            <Text style={styles.inboxText}>Inbox</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.inboxView}>
                            <Text style={styles.inboxNumber}>17</Text>
                            <Text style={styles.inboxText}>Sent</Text>
                        </TouchableOpacity>
                    </View>
                    </View>
                </ImageBackground>
            </View>

Стиль

const styles = StyleSheet.create({
    container: {
        flex: 1, backgroundColor: '#fff'
    },
    bgImg:{
        height: hp('40%'), width: '100%'
    },
    setting:{
        color:'white'
    },
    headerText:{
        flex:1,textAlign:'center',fontSize:wp('5%'),fontFamily:Fonts.Cairo,marginRight:10,color:'white'
    },
    headerView:{
        flexDirection:'row',justifyContent:'space-between',marginHorizontal:10,marginTop:hp('5%')
    },
    imgView:{
        flex:1,
        alignItems:'center'
    },
    accImg:{
        height:wp('30%'),width:wp('30%'),borderRadius:wp('15%'),marginTop:wp('3%')
    },
    name:{
        color:'white',fontFamily:Fonts.Cairo,fontSize:wp('4%'),textAlign:'center'
    },
    number:{
        color:'white',fontSize:wp('4%'),textAlign:'center'
    },
    bottomView:{
        flex:1,
        justifyContent:'flex-end'
    },
    inboxNumber:{
        color:'white',
        textAlign:'center',
        fontSize:wp('4%')
    },
    inboxText:{
        color:'white',
        textAlign:'center',
        fontSize:wp('4%'),
        fontFamily:Fonts.Cairo
    }, 
    bottomView2:{
        flexDirection:'row',
        justifyContent:'space-between',
        marginHorizontal:10,
        marginBottom:wp('3%')
    },

});

Вывод

Answer 1

Iphone X отображает реальный результат, вот как выглядит ваш макет, на других устройствах нет места для рендеринга, и они "перекрывают" виды ... Посмотрите на ваши виды, у вас есть фоновое изображениекоторый занимает 40% экрана, внутри у вас есть заголовок, который будет отображаться нормально, так как он выше в функции рендеринга.

Ниже у вас есть представление с flex: 1 и внутри изображения с экранными значениями с 2Строки текста ниже, если изображение более длинное, чем представление, оно вытеснит текст за пределы представления, вторгаясь в соседнее представление ниже

НИЖЕ, что у вас есть представление с двумя возможностями touchableopacity.они не должны перекрываться.На самом деле попробуйте добавить overflow:'hidden' к стилю imgView

------ заголовок ------

/////// IMAGE ////////

/////// ИЗОБРАЖЕНИЕ ////////

/////// Johndo ///////

/////// 12345 ////////

Кнопка ////// Кнопка

Так же, как iphone показывает

<ImageBackground source={require('../../assets/acc.png')} style={styles.bgImg}>
                    <View style={styles.headerView}>
                    //here is the header
                    </View >

                    <View style={styles.imgView} >
                       // below is the image , the name , and the number
                    </View>
                    <View style={styles.bottomView}>
                    //below it should be the 2 buttons , not overlapping, BELOW
                    </View>
                </ImageBackground>