모든 장치에 대해 반응 형 네이티브 호환 화면을 디자인하는 방법

Question

이 디자인을 디자인하려고합니다. react-native. 이것은 내가 이것을 코딩 한 것이지만 이것은 내가 원하는 것이 아니다. 이것은 한 화면에서만 작동합니다. 화면 크기를 변경하면 문제가 해결되지 않습니다.

이것은 절대적인 레이아웃처럼 보입니다. 내가 모든 화면 크기에서 작동 할 수 있도록하기 위해 어떤 방식으로 변경해야합니까?

/** 
* 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); 

예상 주 :

현재 상태 :

넥서스 4 - 768x1280

넥서스 6P - 인치 1440x2560

Answer 1

빠른 대답은 당신이 가지고 그런 말, 당신의 외부 용기 내에서 플렉스를 사용하는 것입니다 분기에 컨테이너를 분할하고 이미지에 화면의 상단 절반을 줄 것이다

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

및 텍스트와 버튼의 다른 두 분기; 원하는대로 패딩과 여백을 사용할 수 있으며 원하는 비율을 사용할 수 있습니다.

그러나 더 고려해야 할 사항은 화면 크기와 관련하여 큰 혼란을 줄 수있는 화면 픽셀 밀도입니다. 나는 그것이 편리 내가

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

로 사용할 외부

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

모듈이 발견 ... 그리고 이미지에 대한 말을했습니다

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

및 글꼴을 :

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

희망이 있습니다.

편집 : 모듈 위에서, 나는이 배포 한 장치를 나를 위해 일했다,하지만 일부 소수 1에서 4까지의 pixelRatio 값이에서 (예 : 1.5) 값을 허용하도록 확대되어야한다 너무 . 내가 이것을 끝내기 위해 노력하고있는 good chart at this link가 있지만, 지금까지 가장 잘 작동 한 것은 위에 게시했습니다.

Answer 2

동적 레이아웃을 만드는 또 다른 좋은 방법은 Dimensions을 사용하는 것입니다. 개인적으로 나는 싫어합니다 (때때로 이해할 수 없음) 치수 사용하기 화면 너비와 높이를 얻을 수 있습니다. 이

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

는 또한이에 추가, 당신은 CSS 스타일로 편안 경우, 미디어 쿼리를 지원하는이 library 건너 온 그냥주는 시도 된 후에는 결과를 나눌 수 있으며, 최고 수준의 구성 요소

에 할당