Comment concevoir des écrans en réaction native compatible pour tous les appareils

Question

J'essaie de concevoir ce design react-native. C'est ce que j'ai codé pour cela mais ce n'est pas ce que je veux. Cela fonctionne sur un seul écran, si je change la taille de l'écran, alors les choses ne fonctionnent pas.

Cela ressemble à une disposition absolue. Quels changements dois-je faire pour le faire de telle sorte qu'il fonctionne sur toutes les tailles d'écran.

/** 
* Sample React Native App 
* https://github.com/facebook/react-native 
* @flow 
*/ 

import React, { Component } from "react"; 
import { 
    AppRegistry, 
    Image, 
    View, 
    Text, 
    Button, 
    StyleSheet 
} from "react-native"; 

class SplashScreen extends Component { 
    render() { 
    console.disableYellowBox = true; 
    return (
     <View style={styles.container}> 
     <Image 
      source={require("./img/talk_people.png")} 
      style={{ width: 300, height: 300 }} 
     /> 
     <Text style={{ fontSize: 22, textAlign: "center", marginTop: 30 }}> 
      Never forget to stay in touch with the people that matter to you. 
     </Text> 
     <View style={{ marginTop: 60, width: 240 }}> 
      <Button title="CONTINUE" color="#FE434C" /> 
     </View> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    backgroundColor: "#FFFFFF", 
    margin: 50, 
    alignItems: "center", 
    flex: 1, 
    flexDirection: "column" 
    } 
}); 

AppRegistry.registerComponent("Scheduled",() => SplashScreen); 

Etat attendu:

Etat actuel:

Nexus 4 - 768x1280

Nexus 6P - 1440x2560

Answer 1

La réponse rapide est d'utiliser Flex au sein de votre récipient extérieur, de sorte que vous avez, dites:

<View style={{flex: 1}}> 
    <View style={{flex: 2}}> 
     <.../>//Image 
    </View> 
    <View style={{flex: 1}}> 
     <.../>//Text 
    </View> 
    <View style={{flex: 1}}> 
     <.../>//Button 
    </View> 
</View> 

qui divise le conteneur en quartiers et donner la moitié supérieure de l'écran à l'image et les deux autres quarts au texte et au bouton; vous pouvez utiliser le remplissage et les marges avec ceux-ci comme vous le souhaitez, et utiliser le ratio que vous voulez. Cependant, ce qui doit encore être pris en compte, c'est la densité de pixels de l'écran, qui peut vraiment faire des ravages avec les tailles d'affichage. Je l'ai trouvé très pratique d'avoir un extérieur

import React from 'react'; 
import { PixelRatio } from 'react-native'; 
let pixelRatio = PixelRatio.get(); 

export const normalize = (size) => { 
    switch (true){ 
    case (pixelRatio < 1.4): 
     return size * 0.8; 
     break; 
    case (pixelRatio < 2.4): 
     return size * 1.15; 
     break; 
    case (pixelRatio < 3.4): 
     return size * 1.35; 
     break; 
    default: 
     return size * 1.5; 
    } 
} 

export const normalizeFont = (size) => { 
    if (pixelRatio < 1.4){ 
    return Math.sqrt((height*height)+(width*width))*(size/175); 
    } 
    return Math.sqrt((height*height)+(width*width))*(size/100); 
} 

Module

que je l'utilise comme

import { normalize, normalizeFont } from '../config/pixelRatio'; 
const {width, height} = require('Dimensions').get('window'); 

... et pour une image, par exemple:

<Image source={ require('../images/my_image.png') } style={ { width: normalize(height*.2), height: normalize(height*.2) } } /> 

et une police:

button_text: { 
    fontSize: normalizeFont(configs.LETTER_SIZE * .7), 
    color: '#ffffff' 
}, 

Espérons que cela aide!

Modifier: Le module ci-dessus a fonctionné pour moi pour les périphériques que j'ai déployés, mais il devrait être étendu pour permettre des valeurs pixelRatio de 1 à 4 avec des valeurs décimales (par exemple 1,5) là aussi . Il y a un good chart at this link sur lequel je travaille pour essayer de finir ça, mais jusqu'à présent, ce qui a le mieux fonctionné, c'est ce que j'ai posté ci-dessus.

Answer 2

Une autre excellente façon de créer une mise en page dynamique est en utilisant le Dimensions, Personnellement, je déteste flex (ne pouvait pas le comprendre à certains moments) Utilisation des dimensions Vous pouvez obtenir la largeur et la hauteur de l'écran. Après quoi, vous pouvez diviser le résultat et leur attribuer à des composants de haut niveau

import React, { Component } from "react"; 
import { 
    View, 
    StyleSheet, 
    Dimensions 
} from "react-native"; 

const styles = StyleSheet.create({ 
container: { 
    backgroundColor: "#FFFFFF", 
    height: Dimensions.get('window').height, 
    width: Dimensions.get('window').width, 
    //height:Dimensions.get('window').height*0.5// 50% of the screen 
    margin: 50, 
    alignItems: "center", 
    flex: 1, 
    flexDirection: "column" 
} 
}); 

également ajouter à cela, suis tombé sur cette library qui prend en charge les requêtes des médias, si vous êtes à l'aise avec des styles css juste donner un essai