在做專案的時候有乙個需求，是可以選擇多個條件的，特地在github上找了一些案例，發現沒有什麼合適的，於是自己根據這些案例，改裝一下，封裝了乙個合適自己的。先看我封裝的**。
1 import react, from 'react';2import from 'react-native'910
11 export default
class checkbox extends component 17}
1819/**
20* proptypes是react內部提供的校驗器,如果通過props傳過的資料與之不匹配,則會丟擲異常。21*
22*/
23 static proptypes =
3738
39/**40
* 如果沒有通過props傳過來資料,則預設的是這樣
41* @type
42*/
43 static defaultprops =,
46righttextstyle: {}47}
4849/**
50* 左邊文字
51*/
52_renderleft()
5657
if (!this
.props.lefttext)
60return(61
this.props.lefttextstyle]}>62)
63}6465
66/**67
* 右邊的文字
68* @returns
69* @private
70*/
71_renderright()
75if (!this
.props.righttext)
78return(79
this.props.righttextstyle]}>80)
81}8283/**
84* 選中和為選中的按鈕樣式
85* @returns
86* @private
87*/
88_renderimage() else94}
9596
gencheckedimage()
102103
104onclick() )
108this
.props.onclick();
109}
110111
render()
115 onpress=
116 underlaycolor='transparent'
117 >
118119
120
121
122123
124)
125}
126}
127128
129130 const styles =stylesheet.create(,
135lefttext: ,
138righttext:
142 })
基本上這些需要的屬性都是通過props來傳遞過來的。
用法也比較簡單：
1 import react, from 'react';2import from 'react-native'
78 import keys from './keys.json'
9 import toast from 'react-native-easy-toast'
1011 export default
class example extends component 17}
1819
componentdidmount()
2223
loaddata() )27}
2829
onclick(data)
3435
renderview()
44
4546
4748)49
}50views.push(
5152
53
54
555657)
58return
views;
5960}61
62rendercheckbox(data) }
67 onclick=
68 ischecked=
69 lefttext=
70 />);71}
7273
render()
7879
}/>
8081)82
}8384}
8586 const styles =stylesheet.create(,
92item: ,
95line: ,
100 })
posted @
2016-12-14 15:14
家磷 閱讀(
...)
編輯收藏
單選多選按鈕
專案 現單選多選這種情況挺多的,所以整合成乙個控制項了，使用方便，可以設定單選，也可以設定多選，最主要的是採用了流式布局，會自動根據螢幕大小和內容進行自動折行。android id id buttnlayout android layout width match parent android la...
多選按鈕 為什麼單選按鈕和核取方塊不能共存？
以下內容由摹客團隊翻譯整理，僅供學習交流，摹客設計 協作一站式雲平台，從產品 設計到開發，摹客來解決。單選按鈕和核取方塊長期以來一直都是容易導致使用者困惑的元件。這兩個元件通常用於相同的情景下，但看起來又完全不同。設計人員和開發人員一般比較清楚兩者的區別，因為他們在工作中會接觸到。那麼，普通使用者知...
JS實現簡單的多選選項的全選反選按鈕
1 doctype html 2 html 3 head lang en 412 meta charset utf 8 13 title js實現全選，反選 title 14 script type 15function cc number 22else if number 2 else if nu...