Android React Native自訂群組件的流程

標籤：

假設我們現在有這麼一個需求，就是自訂一個組件，該組件由一個小表徵圖和表徵圖的文字說明組成，並且帶有背景色，背景色可設定，寬度高度可設定。如所示正是兩個這樣的組件所組成。

首先，在index.android.js目錄下建立一個js檔案，命名為item.js，在裡面輸入模板代碼

/*** 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;

注意最後的一句module.exports = Item;，將組件匯出。

我們的組件最外圍應該是一個View，View裡面嵌套了一個Image和Text，並且View，Image，Text都有對應的樣式，圖片地址還要可以設定，常值內容可設定，而View的背景色，高度，寬度等樣式應該由外部傳入，並且與組件內部的樣式聯合作用，這一點可以使用樣式數組實現，即style={[style1,style2,style3]}，最終，render函數中返回的資訊如下。

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

現在我們拿到外部設定的屬性值

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;

所以最終的代碼是這樣的

var Item = React.createClass({  render: function() {    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;    return (      <View style={[styles.item,outStyle]}>        <Image style={styles.image} source={{uri:img}}/>        <Text style={styles.text}>{text}</Text>      </View>    );  },});

在內部我們還要對其進行樣式化

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‘  }});

當然，這個View還可以提取很多屬性為自訂的屬性，本例子只是為了示範，所以提取了幾個個別的屬性

如何使用？
也很簡單，要使用的檔案中引入該組件，使用定義的標籤，並設定對應的屬性即可。

引入組件

var Item = require(‘./item‘);

使用組件

var AwesomeProject = React.createClass({  render: function() {    return (        <View style={styles.container}>        <Item style={styles.item1} color=‘#aaa‘ width=‘100‘ height=‘100‘ 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=‘100‘ height=‘100‘ text=‘Icon‘ img=‘https://raw.githubusercontent.com/lizhangqu/androidicons/master/assets/blue_dark/xhdpi/ic_action_bike.png‘></Item>      </View>          );  },});var styles = StyleSheet.create({    container:{    flexDirection:‘row‘,    justifyContent:‘center‘,    alignItems:‘center‘,    backgroundColor:‘#ff0000‘  },  item1:{    marginLeft:100,  },  item2:{    marginLeft:100,  }});

可以看到我們在render函數中使用了Item標籤，並在該標籤中設定了自訂的屬性，最終這些屬性會被設定到我們的組件上去。

Android React Native自訂群組件的流程