如何设计屏幕反应原生兼容所有设备

我想设计这个设计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

如何设计屏幕反应原生兼容所有设备

回答

相关问题