React Native Height and Width settings

Source: Internet
Author: User

The dimensions in the React native are non-units, representing logical pixels that are independent of the device pixel density.

ImportReact, {Component} from' React ';Import {Appregistry,View} from' React-native ';ClassFixeddimensionsbasicsExtendsComponent {render () {Return (<View> <View style={{width: , Height: backgroundcolor: ' Powderblue '}}/> <view Style={{width: c5>100, Height: backgroundcolor: ' Skyblue '}}/> <View style={{width: Max , Height: Max , BA Ckgroundcolor: ' Steelblue '}}/> </view>); }}; //Registration Application (RegisterComponent) to render correctly //NOTE: Only the application is registered once as a whole, not each component/module is registered appregistry.registercomponent ( ' Awesomeproject ', () = fixeddimensionsbasics);          

2. Flexible (Flex) Width and height
ImportReact, {Component} from' React ';Import {Appregistry,View} from' React-native ';ClassFlexdimensionsbasicsExtendsComponent {render () {Return (//try to remove the ' flex:1 ' from the parent view. //the parent view no longer has dimensions, so the subassembly cannot be stretched again. //and then use ' height:300 ' instead of the ' flex:1 ' of the parent view? <view Style={{flex: 1}}> <View Style={{flex: 1, BackgroundColor:  ' Powderblue '}}/> << Span class= "Hljs-type" >view Style={{flex: 2, BackgroundColor:  Skyblue '}}/> <view Style={{flex: 3, BackgroundColor:  ' Steelblue '}}/> </view>); }}; appregistry.registercomponent ( ' Awesomeproject ', () = flexdimensionsbasics)            

React Native Height and Width settings

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.