編輯:關於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 (
注意最後的一句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標簽,並在該標簽中設置了自定義的屬性,最終這些屬性會被設置到我們的組件上去。
結構型模式中的適配器模式、外觀模式、裝飾模式、代理模式都屬於包裝模式,都是對另外的類或對象的包裝,只是各自的意圖不同。
完美解決解決Android使用Zxing掃描二維碼改成豎屏後,後面的預覽畫面出現了拉伸,扭曲的情況第一步:找到com.zxing.camera包下的CameraConf
Frame Animation 表示幀動畫,是順序播放事先做好的圖像,跟電影類似,Android SDK提供了另外一個類AnimationDrawable來定義使用Fra
原因:編譯器版本的問題。Java 1.5的編譯器默認對父類的方法進行覆蓋,采用@Override進行說明;但1.6已經擴展到對接口的方法;所以如果還是以Java 1.5