如何設計屏幕反應原生兼容所有設備

我想設計這個設計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);

預期狀態：

現狀：

的Nexus 4 - 768x1280

的Nexus 6P - 1440x2560

來源

2017-04-14 N Sharma

簡單的回答是你的外部容器中使用的彎曲，這樣，你有，說：

<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，我正在努力完成這項工作，但到目前爲止，最有效的方法就是我上面所提到的。

來源

2017-04-14 18:23:01 kwishnu

有沒有處理這個問題的軟件包？對於RN開發者來說，這似乎是一項非常普遍的任務。 –

另一種創建動態佈局的好方法是使用Dimensions，個人而言，我討厭flex（有時無法理解它）使用尺寸您可以獲取屏幕寬度和高度。在這之後，你可以劃分結果，並將它們分配到頂級部件

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

也加入到這個，從此library支持媒體查詢，如果你是舒適與CSS樣式來只是試試看

來源

2017-04-16 19:34:05

如何設計屏幕反應原生兼容所有設備

回答

相關問題