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.Farklı ekran boyutlarında yerel olarak nasıl davranılır?
cevap
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.
ö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.
Bu, birden çok aygıt için çalışmaz (gerçekte tam olarak değil) –
Bunu görmediniz mi? Benim için iyi çalışıyor gibi görünüyor (en azından android üzerinde) – Philberg