Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> Android React Native自定義組件的流程

Android React Native自定義組件的流程

編輯:關於Android編程

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

這裡寫圖片描述

首先,在index.android.js目錄下新建一個js文件,命名為item.js,在裡面輸入模板代碼<喎?/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標簽,並在該標簽中設置了自定義的屬性,最終這些屬性會被設置到我們的組件上去。

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved