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

Question

I have a View in react-native with a few components. While everything shows up correctly on the iPhone 6 and 5, when viewing it on an iPhone 4s, the bottom of one of the components is slightly cut off.

I see there are ways to scale base64 icons. Is there any way to scale an entire container View to be uniformly smaller or larger?

Answer 1

Does something like this help you ?

YourStyleSheet.js

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

Then in your style you can specify the size of the component on different screen sizes like this

import YourStyleSheet from './path/YourStyleShett'    
const styles = YourStyleSheet.create({
      component:{
        sm:{fontSize: 20,},
        md:{fontSize: 30,},
        lg:{fontSize: 30,},
        textAlign: 'center',
        marginBottom: 10,
        fontWeight:'bold',
        color:colors.white,
      }
    });

Answer 2

Your question can be break down into two parts:

1, To scale width , height , paddings and margins . These can be easily achieve by using % and aspectRatio .

2, To scale Text , you might want to consider using Extended StyleSheet , which allows you to use rem .

You can simply following tutorial " 7 Tips to Develop React Native UIs For All Screen Sizes " for how to use the above tips.

Additionally, check out Extended StyleSheet Scaling , which allows to use $scale variable to scale base on conditions.