I. Declaration and use of styles1.React native inside the style and use as shown below, stylesheet.create This constructor is not necessary;
index.android.js file import React, {...} from ' react-native '; class Awesomeproject extends C Omponent {render () {return (<View>//all core components can accept the Style property <text Style={styles.base }>declare style</text>//Accept multiple style <text style={[styles.base in array form, STYLES.BACKGROUND]}> ;D Eclare style</text>//Optionally add styles based on certain conditions, negative values such as false,undefined and null are ignored <view style={[styles . Base, True && styles.active]}/>//You can create a style in the Render method, when multiple values conflict, the right element has the highest priority <view style={[ Styles.background, Styles.base, {width:80, height:80}]}/> </View>); }}//declaration style var styles = Stylesheet.create ({base: {width:100, height:38,}, background: {backgroundcolor: ' #c CCCCC ',}, active: {borderwidth:2, bordercolor: ' #00ff00 ',},}); Appregistry.registercomponent (' Awesomeproject ', () = Awesomeproject);
Second, Flexbox (elastic box model)1. On the layout, the React native also implements the elastic box model Flexbox. The Flexbox layout consists of a telescopic container and a telescopic project, and any element can be specified as a flexbox layout;the element which is set as Display:flex or Display:inline-flex is called the telescopic container;the child element of the telescopic container is called the scaling project;2. Unlike the traditional layout, it is arranged in the direction of the telescopic flow;3. By default, the telescopic container consists of two axes, namely the spindle (main axis) and the crossover axis (cross axis);where the starting position of the spindle is called main start, the end position is called main end;the starting position of the intersection is called Cross start, and the end position is called the Intersect end;The space occupied by the telescopic project on the spindle is called the main size, and the space occupied on the intersection is called cross size;depending on the setting, the spindle can be either a horizontal axis or a vertical axis;regardless of the axis as the spindle, by default the telescopic project is always arranged along the spindle, from the start of the spindle to the end of the spindle;4. Telescopic Container Propertiesbelow we have a practical demo to demonstrate the role of the relevant properties;
Index.android.js file: Import React, {...} from ' react-native '; Class Awesomeproject extends Component {render () {return (<view style={styles .flexcontain}> <view style={styles.flexitem}> <text>1</tex t> </View> <view style={styles.flexitem}> <Text>2</Text> </View> <view STYLE={STYLES.FLEXITEM}&G T <Text>3</Text> </View> <view style={styles.flexitem}> <Text>4</Text> </View> <view Styl E={[styles.flexitem,styles.item5]}> <Text>5</Text> </view& Gt </View> ); }} var styles = Stylesheet.create ({flexcontain: {width:300, height:300, Borderwidth:1, bordercolor: ' Blue ', flexdirection: ' Row ', top:100, Left:100,}, Flexitem: {width:50, height:50, Borderwidth:1, BorderColor: ' White ', BackgroundColor: ' Gray ', justifycontent: ' Center ', a Lignitems: ' Center ',}, Item5: {alignself: ' Stretch ',},}); Appregistry.registercomponent (' Awesomeproject ', () = Awesomeproject);flexdirection: Specify the direction of the spindle;row: horizontal direction;column: Vertical direction;
Flexwrap: If the main axis direction space is insufficient, whether to wrap and how to break the line;Wrap: Allow line break in case of insufficient space, from top to bottom if the spindle direction is horizontal, if the spindle direction is vertical, from left to right;nowrap: Even if there is not enough space, telescopic containers are not allowed to wrap;
justifycontent: The way of the telescopic project along the spindle direction;Flex-start: Telescopic project along the spindle line on its way;Flex-end: The Telescopic project is aligned along the end position of the spindle line;Center: Telescopic project to the center of the spindle alignment;Space-between: The scaling project will be evenly distributed in the main axis, the first scaling project at the beginning of the main axis, the last item at the end of the main axis;Space-around: The scaling project will be evenly distributed in the main axis, the two ends of the space to maintain half;
Alignitems: The way the Telescopic project is on the cross axis of the telescopic container;Flex-start: The telescopic project aligns to the starting position of the intersection axis;Flex-end: The telescopic project aligns to the end position of the intersection axis;Center: The telescopic project aligns to the middle position of the intersection axis;
alignself: Sets the alignment of individual telescopic items on the cross axis;Auto: Telescopic project according to its own set of wide-height display;Flex-start: The Telescopic project is aligned to the starting position of the intersection axis;Flex-end: The Telescopic project is aligned to the end position of the intersection axis;Center : The telescopic project aligns to the central position of the cross axis;
borderbottomwidth/borderrightwidth/bordertopwidth/bordertopwidth: The width of the bottom border;
margin/margintop/marginbottom/marginleft/marginright: outer margin;padding/paddingtop/paddingbottom/paddingleft/paddingright: inner margin;Left/top/right/bottom: Upper-left corner coordinates;width/height: wide height;
third, pass the style as a parameterLate look ....
React Native Three: Style
