2.ReactNative properties| states| Styles notes

Original address: Http://reactnative.cn/docs/0.31/props.html#content

1. Property:

As shown in the following code

ImportReact, {Component} from' React ';Import {Appregistry,image} from  ' react-native '; class bananas extends component {render () {let pic = {uri:  ' Https:// Upload.wikimedia.org/wikipedia/commons/d/de/bananavarieties.jpg '}; return (<image source={pic} style={{width: 193, Height: 110}}/>); }}appregistry.registercomponent ( ' Bananas ', () = bananas); 
 
 Upper <> Middle wrapped objects, source={xxx} where source is the property of the picture, it represents its source address. Similar to HTML in src= "http://..." 
 after {} is marked by the value of the attribute )。 It is inferred from the following style={} property that the value in the middle of {} is the existence of an attribute variable or object. 
                

 {{width: 193, Height: 110}} is somewhat similar to a JSON data and can be understood as an expression. So we can embed any legitimate JavaScript expression into the JSX statement using parentheses. 
 
 Our custom components can also use props, which can be customized by using different properties in different scenarios, to maximize the reuse of custom components, simply by referencing this.props in the render function and then processing as needed.  Give a chestnut: 
 Import react,{component}from ' React '; 
 Import {appregister,text,view} form ' react-native '; 
     Class Greeting extends Component {
 render () (
 return (<text>hello {this.props.name}!</text> 
 ); 
} 
}    

   class Lotsofgreetings extends Component {
 render () {
 return (
 <view style={{alignitems: ' Center '}} 
 <greeting name = ' Rexxar '/> 
 <greeting name = ' Jaina '/> 
 <greeting name = ' Valeera '/> 
 ); 
} 
} 
 
 Appregistry.registercomponent (' lotsofgreetings ', () =>      

lotsofgreetings  < Span class= "Hljs-symbol" >  ); 
 
 
 2. State: 
 If you need to initialize state in Constuctor China, you need to call the SetState method when you modify it. 
 example, blinking text effect. The 
 text content can be specified when the component is created, so the hidden and blinking state of the corresponding text changes over time. 
 Import react,{Component} from ' React '; 
 Import {Appregistry,text,view} from ' react-native '; 
                 /span>      

class Blink extends Component {constructor (props) { super (props); this.state = {showtext: true}; //Every 1000 milliseconds the Showtext status is reversed SetInterval (() = { This.setstate ({showtext:!  This.state.showText}); }, 1000); } render () { //To display text content based on the current Showtext value let display = this.state.showText? this.props.text: "; return (<text>{display}</text>);}}         

class blinkapp extends component {render () {return (<view> << Span class= "Hljs-type" >blink text= ' I love to Blink '/> <Blink Text= ' Yes blinking are so great '/> <blink text=blink text= ' look at me ' in me look at me '/> </blinkapp);               

3. 样式

The style you set will be higher than the style you set first
Import React, {Component}From' React ';Import {appregistry, StyleSheet, Text, View}From' React-native ';ClassLotsofstylesExtendsComponent {render () {Return (<View><Textstyle={Styles.red}>just Red</Text><Textstyle={Styles.bigblue}>just Bigblue</Text><Textstyle={[styles.bigblue, styles.red]} >bigblue, then Red</text> << Span class= "Hljs-name" >text style={[styles.red, styles.bigblue]}>red, then Bigblue</Text> Span class= "Hljs-tag" ></view>); }}const styles = Stylesheet.create ({bigblue: {color:  ' Blue ', FontWeight:  "bold", FontSize: 30,}, Red: {color:  ' Red ',},}); Appregistry.registercomponent ( ' Lotsofstyles ', () = Lotsofstyles);     

It is common practice to declare and use attributes sequentially in order style to draw on the "cascade" approach in CSS (that is, the later declared properties overwrite the first declared property with the same name).

4. Width and height

You can define it as a style property and write a JSON format string in {}. You can define an inline style by using the dot syntax.

ImportReact, {Component} from' React ';Import {Appregistry,View} from' React-native ';ClassFixeddimensionsbasicsExtendsComponent {render () {Return (<View> <View Style={{width:50, Height: 50, BackgroundColor: view style={{width: 100, Height: 100, BackgroundColor:  ' Skyblue '}}/> < View style={{width: 150, Height: 150, BackgroundColor:  ' Steelblue '}}/> </view>); }}; //Register app (registercomponent) to render correctly //Note: Register the app only once as a whole, Instead of each component/module is registered appregistry.registercomponent ( ' Awesomeproject ', () = fixeddimensionsbasics); 
 
 5. Elastic style 
 Flex=1, the component occupies the entire remaining space, and if there are multiple components, name these components divide the remaining space.  

ImportReact, {Component} from' React ';Import {Appregistry,View} from' React-native ';ClassFlexdimensionsbasicsExtendsComponent {render () {Return (Try removing 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); 
 
 6. Layout with Flexbox: 
            

The Flexbox can provide a consistent layout structure on different screen sizes.

In general, the use flexDirection , alignItems and justifyContent three style attributes are already sufficient for most layout requirements.

The Flexbox in React native is basically consistent with the CSS on the web, and there are, of course, little differences. First, the default value is different: The default value is instead flexDirection column row , alignItems The default value is not stretch flex-start , and flex only one numeric value can be specified.

Specifies the spindle in the component that style flexDirection can determine the layout. Should the child elements be arranged along the horizontal axis ( row ) or in the vertical axis ( column ) direction? The default value is the vertical axis ( column ) direction.  <View style={{flex: 1, flexDirection: ‘row‘}}>

    Justifycontent can determine the arrangement of its child elements along the spindle, Flex-start,center,flex-end,space-around and space-bettween.

   alignitems  in the component's style to determine its child elements along the secondary axis (axes perpendicular to the spindle, for example, if the spindle direction is  row , The direction of the secondary axis is  column ) arrangement. Should the child element be near the start or end of the sub-axis? Or should it be evenly distributed? The following options are available:  flex-start ,  center ,  Flex-end , and  stretch . 
 
                 /span>     

2.ReactNative properties| states| Styles notes