Android React Native The process of customizing components

Suppose we now have a need to customize a component that consists of a small icon and a text description of the icon, with a background color, a back-view setting, and a width height setting. As shown is the composition of two such components.

First, in the Index.android.js directory to create a new JS file, named Item.js, enter the template code inside

/*** Sample React Native app* https://github.com/facebook/react-native*/  ' use strict ' ; var  React = require  ( ' react-native ' ); var  {StyleSheet, Text, View, Image,} = React; var  Item = React.createclass ({render: function   ()  { return  (<view ;  </  view ; ); }); var styles = Stylesheet.create ({}); module.exports = Item;   

Note the last sentence module.exports = Item;, export the component.

The outermost part of our component should be a view,view inside nested an image and text, and view,image,text have corresponding style, picture address also can be set, text content can be set, and view background color, height, width and so on style should be imported from outside, And it works in conjunction with the styles inside the component, which can be implemented using a style array, Style={[style1,style2,style3]}, and finally, the information returned in the Render function is as follows.

<View style={[styles.item,outStyle]}> <Image style={styles.image} source={{uri:img}}/> <Text style={styles.text}>{text}</Text></View>

Now we get the property values for the external settings

var outStyle={  width:parseInt(this.props.width),  height:parseInt(this.props.height),  backgroundColor:this.props.color,}var img=this.props.img;var text=this.props.text;

So the final code is this.

varItem = React.createclass ({render: function() {    varoutstyle={width:parseint( This. Props.width), Height:parseint( This. Props.height), BackgroundColor: This. Props.color,}varimg= This. props.img;vartext= This. Props.text;return( <View Style={[Styles.item,outstyle]}><Image  Style={styles.image} Source={{uri:img}}/><Text style={styles.text}>{text}</text></   View> ); },});                      

We're going to style it internally.

var styles = StyleSheet.create({ item:{ justifyContent:‘center‘, alignItems:‘center‘, borderRadius:10, marginLeft:5, marginRight:5, marginTop:5, marginBottom:5, }, image:{ width:48, height:48, }, text:{ color:‘#ffffff‘, alignItems:‘center‘ }});

Of course, this view can also extract many properties as custom properties, this example is just for demonstration, so extracts several individual attributes

How do I use it?
It is also very simple to use the file to introduce the component, use the defined label, and set the corresponding property.

Introducing Components

varrequire(‘./item‘);

Working with Components

varAwesomeproject = React.createclass ({render: function() {    return(<view style={styles.container}> <item style={styles.item1} color=' #aaa 'Width=' + 'height=' + 'text=' Icon 'img=' Https://raw.githubusercontent.com/lizhangqu/androidicons/master/assets/blue_dark/xhdpi/ic_action_ Achievement.png '></Item> <item style={styles.item2} color=' #aaa 'Width=' + 'height=' + 'text=' Icon 'img=' Https://raw.githubusercontent.com/lizhangqu/androidicons/master/assets/blue_dark/xhdpi/ic_action_bike.png '></Item> </View>); },});varStyles = Stylesheet.create ({container:{flexdirection:' Row ', Justifycontent:' Center ', Alignitems:' Center ', BackgroundColor:' #ff0000 '}, item1:{MarginLeft: -,}, item2:{marginleft: -,  }});

You can see that we used the Item tag in the render function and set the custom properties in the tag, and eventually the properties are set to our component.

Android React Native The process of customizing components