如何设计屏幕反应原生兼容所有设备
问题描述:
我想设计这个设计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
答
简单的回答是你的外部容器中使用的弯曲,这样,你有,说:
<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,我正在努力完成这项工作,但到目前为止,最有效的方法就是我上面所提到的。
答
另一种创建动态布局的好方法是使用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样式来只是试试看
有没有处理这个问题的软件包?对于RN开发者来说,这似乎是一项非常普遍的任务。 –