Farklı ekran boyutlarında yerel olarak nasıl davranılır?

Question

Tepki-yerel üzerinde bir uygulama geliştiriyorum. IPhone 6'da iyi çalışan ancak iPhone 5 veya daha düşük sürümlerde iyi çalışmayan bir kullanıcı arayüzü hazırladım. Bunu nasıl düzeltmeliyim? Boyutları ekran boyutuna göre dinamik olarak hesaplamanız gerekiyor.

Answer 1

Uygulamayı sabit genişlik ve yükseklikleri kullanarak tasarladınız mı? Kesinlikle flexbox yeteneklerini kullanmalı ve mümkün olduğunca sabit boyutlu ayarlardan kaçınmaya çalışmalısınız. flex property, <View />'un ne kadar alanın başkalarına kullanması gerektiğini tanımlamak için kullanılabilir ve bu sayfadaki diğer özellikler, farklı ekran boyutlarında istenen sonuçları vermesi gereken öğeleri esnek bir şekilde düzenlemek için kullanılabilir.

Bazen, bir <ScrollView />'a da gereksinim duyabilirsiniz.

Sabit boyutlara ihtiyacınız olduğunda, Dimensions.get('window')'u kullanabilirsiniz.

Answer 2

örneğin 56'da Yani bir

import { Dimensions, StyleSheet } from 'react-native' 

[...] 

const { width, height } = Dimensions.get('window') 

[...] 

const styles = StyleSheet.create({ 
    container: { 
     flex: 1. 
     flexDirection: 'column', 
    }, 
    myView: { 
     width: width * 0.8, // 80% of screen's width 
     height: height * 0.2 // 20% of screen's height 
    } 
}) 

Eğer Dimensions.get('window') size bütün ekranın yüksekliği sağlar unutmayın TabbarIOS kullanıyorsanız, bu tabbar ettiğini hesaba almak gerekecek demektir sabit yükseklik TabbarIOS kullanıldığında,:

const WIDTH = Dimensions.get('window').width, 
     HEIGHT = Dimensions.get('window').height - 56 

Sonra yukarıda genişlik ve yükseklik kullanın.