Android React Native自定義組件的流程

Android React Native自定義組件的流程

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

首先，在index.android.js目錄下新建一個js文件，命名為item.js，在裡面輸入模板代碼<喎?http://www.Bkjia.com/kf/ware/vc/" target="_blank" class="keylink">vcD4KCgoKPHByZSBjbGFzcz0="brush:java;">/** * 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 ( ); }, }); var styles = StyleSheet.create({ }); module.exports = Item;

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

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

    
    {text}
" data-snippet-id="ext.20c155944f536ddefceb3ad985596b1f" data-snippet-saved="false" data-codota-status="done">
    
    {text}

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

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;

所以最終的代碼是這樣的

        
        {text}
      
    );
  },
});" data-snippet-id="ext.a1ee96691ceb318e34e967fc4eb0fed1" data-snippet-saved="false" data-csrftoken="vpkyUR1T-z6G3oFFcR3BjCFx21rhhslN4uMw" data-codota-status="done">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 (
      
        
        {text}
      
    );
  },
});

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

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 styles = StyleSheet.create({
    container:{
    flexDirection:'row',
    justifyContent:'center',
    alignItems:'center',
    backgroundColor:'#ff0000'
  },
  item1:{
    marginLeft:100,
  },
  item2:{
    marginLeft:100,
  }
});" data-snippet-id="ext.766e4568c42c583094d28ff6f898d1dd" data-snippet-saved="false" data-csrftoken="25KQm5HJ-O8bFyH36J_KWjyc14AV8sNyHAN8" data-codota-status="done">var AwesomeProject = React.createClass({
  render: function() {
    return (
        
        
        
            
    );
  },
});

var styles = StyleSheet.create({
    container:{
    flexDirection:'row',
    justifyContent:'center',
    alignItems:'center',
    backgroundColor:'#ff0000'
  },
  item1:{
    marginLeft:100,
  },
  item2:{
    marginLeft:100,
  }
});

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