/** * Sample React Native App *https://github.com/facebook/react-native* @flow*/import React, {Component} from 'react'; import {appregistry, StyleSheet, Text, View} from 'react-native';/*--------------------The first example of a program------------------*/classFlexboxdemo extends Component {render () {return ( <view style={styles.container}> <text style = {{backgroundcolor:'Red', Height: -}}> First </Text> <text style = {{backgroundcolor:'Green', Height: -}}> second </Text> <text style = {{backgroundcolor:'Yellow', Height: -}}> third </Text> <text style = {{backgroundcolor:'Blue', Height: -}}> Fourth </Text> </View> ); }}ConstStyles =stylesheet.create ({container: {//Note: The height of the parent view is determined with the child view//change the direction of the spindleFlexdirection:'Row', BackgroundColor:'Purple', //distance from top of spaceMarginTop: -, //Setting the alignment of the spindleJustifycontent:'Center', //to set the alignment of the side axisAlignitems:'Flex-end' },});/*--------------------A second example program------------------*/classFlexBoxDemo1 extends Component {render () {return ( <view style={styles1.container}> <text style = {{backgroundcolor:'Red', Width: -}}> First </Text> <text style = {{backgroundcolor:'Green', Width: $}}> second </Text> <text style = {{backgroundcolor:'Yellow', Width: -}}> third </Text> <text style = {{backgroundcolor:'Blue', Width: -}}> Fourth </Text> </View> ); }}ConstStyles1 =stylesheet.create ({container: {//Note: The height of the parent view is determined with the child view//change the direction of the spindleFlexdirection:'Row', BackgroundColor:'Purple', //distance from top of spaceMarginTop: -, //Setting the alignment of the spindleJustifycontent:'Center', //to set the alignment of the side axisAlignitems:'Flex-end', //set image wrapping display, default is no line breakFlexwrap:'Wrap', //determines the width of the box width = elastic Width * (flexgrow/Parent view width)Flex:1, },})/*--------------------A third example program------------------*/classFlexBoxDemo2 extends Component {render () {return ( <view style={styles2.container}> <text style = {{backgroundcolor:'Red', Height: -, Alignself:'Flex-start'}}> First </Text> <text style = {{backgroundcolor:'Green', Height: the}}> second </Text> <text style = {{backgroundcolor:'Yellow', Height: -}}> third </Text> <text style = {{backgroundcolor:'Blue', Height: the}}> Fourth </Text> </View> ); }}ConstStyles2 =stylesheet.create ({container: {//Note: The height of the parent view is determined with the child view//change the direction of the spindleFlexdirection:'Row', BackgroundColor:'Purple', //distance from top of spaceMarginTop: -, //Setting the alignment of the spindleJustifycontent:'Center', //to set the alignment of the side axisAlignitems:'Flex-start', //set image wrapping display, default is no line breakFlexwrap:'Wrap', //determines the width of the box width = elastic Width * (flexgrow/Parent view width)Flex:1,},}) Appregistry.registercomponent ('Flexboxdemo', () = FlexBoxDemo2);
Important properties of the Flexbox layout