1. 程式人生 > >react native元件封裝及傳值

react native元件封裝及傳值

一、元件傳值方式

1、向元件傳值

<MyCommponent 
    value1="傳入文字類別資料"
    value2={true} //傳入boolen資料
    value3={[{key1:"值1"},{key2:"值2"}]}//傳入陣列物件
    value4={()=>{Alert.alert("傳入回撥方法")}}
    value5 = {2}//傳入數值
/>

2、元件獲取值

     再MyCommponent內部呼叫

     this.props.value1

3、元件與引用元件的地方通過方法回撥實時傳值

    1中的value4可以改寫為value4={ (name,sex) => {return "向MyCommponent傳遞的資料"} } //name和sex是MyCommponent傳過來的資料

     在MyCommponent中使用回撥let getValue =  this.props.value4("小明他爸","boy")

4、除了可以向元件傳值外 ,還可以向元件傳module(或者簡單的控制元件)

     eg:

       傳入

<MyCommponent>

   <Text> 這個是傳入到子元件的空間</Text>

</MyCommponent>
      在MyCommponent中接收
render(){

return(
this.props.children

);

}
注意上面的children代表傳過來的<Text>,必須寫children,如果傳多個並列的元件就需要先從children中一個一個取出來,並列的元件會以集合的形式傳過來

二、元件封裝的一些規範和技巧

1、方法的抽取(可以抽去到令人髮指,目的就是以後除錯方便,模組化開發嘛)

封裝元件的目的是為了元件的複用,而複用本身就需要支援呼叫方多種需求,面對多種需求就需要做多種判斷,為了程式碼的間接性和可讀性,把每一個需要呼叫方做判斷的地方都

抽取出來;方便以後的業務更改;

2、設定引用元件時屬性的自動提示功能

//元件引用說明
RadioButtonGroupView.propTypes={
        itemWidth:PropTypes.number, //手動設定radio框的寬度,如果沒有設定就預設為 itemWidth
        itemHeight:React.PropTypes.number, //手動設定radio框的高度,如果沒有設定就預設為 itemHeight
        dataSource:PropTypes.array, //手動輸入資料來源,必須是固定格式必須填,格式如下dataSource = [{name:'智慧政務'},{name:'便民服務'},{name:'堅果狂歡'},{name:'水果盛宴'}];
        itemSelectedId:PropTypes.number, //預設選中的條目,預設為0
        itemBeClicked:PropTypes.func, //回撥函式,用於回傳點選的哪個條目,(item,i),第一個item是條目中的物件,i表示條目地址
}
其中RadioButtonGroupView是你封裝的元件的名字,這些程式碼需要放在整個類的下方,我是放在style下面了,反正目前這樣可以自動提示屬性,至於為什麼活著放在其他

地方行不行還不知道,以後再試試,試好了及時更新,好了開始工作了,拜