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