ios - React Native 响应式 View Iphone x
<p><p>我在为 Iphone X 设计样式时遇到了一个小问题，我使用了 react-native-responsive-screen 中的 widthPercentageToDP 和 heightPercentageToDP 来使 View 相似，在除 Iphone X 之外的大多数设备中它都可以正常工作，差别有点有点，但我想让 View 尽可能准确。</p>
<pre><code><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>
</code></pre>
<p>风格</p>
<pre><code>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%')
},
});
</code></pre>
<p>输出
<a href="/image/vmGxg.png" rel="noreferrer noopener nofollow"><img src="/image/vmGxg.png" alt="enter image description here"/></a> </p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>Iphone X 正在渲染真实的结果，这就是您的布局的样子，其他设备没有足够的空间进行渲染，并且它们“重叠”了 View ......看看你的 View ，你有一个图像背景它占据了 40% 的屏幕，里面有一个可以正常渲染的标题，因为它在渲染功能中更高。</p>
<p>下面你有一个带有 flex :1 的 View 和一个基于屏幕值的图像，下面有 2 行文本，如果图像大于 View ，它将把文本推到 View 之外，侵入下面的邻居 View </p>
<p>在下面，您可以看到 2 touchableopacitys 的 View 。它们不应该重叠。其实试试在imgView样式中加入<code>overflow:'hidden'</code></p>
<p>------标题------</p>
<p>///////图片////////</p>
<p>///////图片////////</p>
<p>///////约翰多///////</p>
<p>///////12345////////</p>
<p>按钮//////按钮</p>
<p>就像 iphone 显示的一样</p>
<pre><code><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>
</code></pre></p>
<p style="font-size: 20px;">关于ios - React Native 响应式 ViewIphone x，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/54389044/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/54389044/
</a>
</p>
页:
[1]