jak obsługiwać różne rozmiary ekranu w reakcji natywnej?

Question

Zajmuję się tworzeniem aplikacji na temat reagowania natywnego. Zrobiłem interfejs użytkownika, który działa dobrze na iPhone 6, ale nie działa dobrze na iPhone 5 lub w niższych wersjach. Jak to naprawić?

Answer 1

Zaprojektowałeś aplikację używając stałych szerokości i wysokości? Zdecydowanie powinieneś korzystać z możliwości flexbox i starać się unikać ustawień o ustalonych rozmiarach w jak największym stopniu. Za pomocą parametru flex property można zdefiniować, ile przestrzeni ma być odpowiednia dla innych, a inne właściwości na tej stronie można wykorzystać do elastycznego ułożenia elementów, które powinny dawać pożądane wyniki dla różnych rozmiarów ekranu.

Czasami możesz potrzebować również <ScrollView />.

Jeśli potrzebujesz stałych rozmiarów, możesz użyć Dimensions.get('window').

Answer 2

Musisz obliczyć rozmiary w sposób dynamiczny, opierając się na rozmiarze ekranu.

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 
    } 
}) 

Jeśli używasz TabbarIOS pamiętać, że Dimensions.get('window') daje wysokość całego ekranu w , oznacza to, że trzeba będzie wziąć w uwagę, że umieszczenie zakładek ma stałej wysokości 56. Tak na przykład przy stosowaniu TabbarIOS:

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

Następnie za pomocą wysokość i szerokość, jak powyżej.