Android React Native The process of customizing components

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.