Question

我有一个View反应原生的一些组件。虽然iPhone 6和5上的所有内容都能正常显示，但在iPhone 4s上查看时，其中一个组件的底部会略微被切断。

我看到有办法扩展base64图标。有没有办法将整个容器视图缩小为统一更小或更大？

Answer 1

这样的事情对你有帮助吗？

YourStyleSheet.js

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="Vaibhav vaihhbhav chhabra" />
<meta charset="UTF-8">
</head>
<body>
<article>Hello</article>
 <a name="pageTop">Top of page</a>
<a href="#pageBottom">Bottom of page</a>
<br>
<br>
<br>
<a href="youtube.com" title="Youtube Site website Titile">Youtbe alone</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br><br>
<br>
<br><br>


 <p>Hello Worlddddd22222222dddddd</p>
 < a href="#pageTop">Top of Page</a>
 <a id="pageBottom">Bottom of page</a>
 <br>
</body>
</html>

然后在您的风格中，您可以在不同的屏幕尺寸上指定组件的大小，例如

import {StyleSheet} from 'react-native';
var Dimensions = require('Dimensions');
var {width, height} = Dimensions.get('window');


export function create(styles: Object): {[name: string]: number} {
  const platformStyles = {};
  Object.keys(styles).forEach((name) => {
    let {sm,md,lg, ...style} = {...styles[name]};
    // iphone 4s and older
    if(sm && width < 375){

      style = {...style, ...sm};
    }
    // iphone 5,5s
    if(md && width >= 375 && width <414){

      style = {...style, ...md};
    }
    // iphone 6 and bigger
    if(lg && width >= 414){

      style = {...style, ...lg};
    }


    platformStyles[name] = style;
  });
  return StyleSheet.create(platformStyles);
}

Answer 2

您的问题可以分为两部分：

1，缩放width，height，paddings和margins。通过使用%和aspectRatio可以轻松实现这些目标。

2，要缩放Text，您可能要考虑使用Extended StyleSheet，它允许您使用rem。

您只需按照教程“ 7 Tips to Develop React Native UIs For All Screen Sizes”了解如何使用上述提示。

另外，请检出Extended StyleSheet Scaling，该变量允许使用$scale变量根据条件进行缩放。

有没有办法在react-native中扩展View？

2 个答案: