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

【问题标题】：How to design screens in react native compatible for all devices如何设计兼容所有设备的原生反应屏幕
【发布时间】：2017-04-14 16:53:02
【问题描述】：

我正在尝试设计这个设计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

【问题讨论】：

标签： android react-native react-native-android react-native-ios react-native-flexbox

【解决方案1】：

快速的答案是在外部容器中使用 flex，例如：

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

这会将容器分成四等份，并将屏幕的上半部分给图像，另外两部分给文本和按钮；您可以根据需要使用填充和边距，并使用您想要的任何比例。

不过，需要进一步考虑的是屏幕像素密度，它确实会对显示尺寸造成严重破坏。我发现外面很方便

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

我使用的模块

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

...对于图像，说：

<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 来尝试完成此操作，但到目前为止，效果最好的是我在上面发布的。

【讨论】：

有处理这个的包吗？对于 RN 开发人员来说，这似乎是一项非常常见的任务。

【解决方案2】：

另一种创建动态布局的好方法是使用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 样式感到满意，那就试试吧

【讨论】：