├── README.md
├── component
    ├── imgs
    │   ├── selt.png
    │   ├── selted.png
    │   └── seltnone.png
    └── radio.js
├── example
    ├── comon
    │   ├── imgs
    │   │   ├── select.png
    │   │   ├── selected.png
    │   │   ├── selectnone.png
    │   │   ├── selt.png
    │   │   ├── selted.png
    │   │   └── seltnone.png
    │   └── radio.js
    └── index.android.js
├── index.js
├── package.json
└── show.jpg


/README.md:
--------------------------------------------------------------------------------
  1 | # radio
  2 | a react-native radio component for android and ios ,user can custom it 
  3 | # Installation
  4 | -npm i react-native-radio-master --save
  5 | # Usage
  6 | ## Import this module:
  7 | ```javascript
  8 |  import RadioModal from 'react-native-radio-master';
  9 | ```
 10 | 
 11 | ## code
 12 | ```javascript
 13 | import React,{Component} from 'react'
 14 | import {
 15 | 	View,
 16 | 	StyleSheet,
 17 | 	Navigator,
 18 | 	TouchableHighlight,
 19 | 	Text,
 20 | 	ScrollView,
 21 | 	Image,
 22 | 	ListView,
 23 | } from 'react-native'
 24 | var Dimensions = require('Dimensions');
 25 | var width=Dimensions.get('window').width;
 26 | var height=Dimensions.get('window').height;
 27 | import RadioModal from 'react-native-radio-master';
 28 | var datas= [
 29 |             {
 30 |               "selecteId": 13,
 31 |               "content": "Apple",
 32 |               "selected": false
 33 |             },
 34 |             {
 35 |               "selecteId": 14,
 36 |               "content": "Banana",
 37 |               "selected": false
 38 |             },
 39 |             {
 40 |               "selecteId": 15,
 41 |               "content": "Orange",
 42 |               "selected": false
 43 |             },
 44 |             {
 45 |               "selecteId": 16,
 46 |               "content": "Watermelon",
 47 |               "selected": true
 48 |             },
 49 |             {
 50 |               "selecteId": 17,
 51 |               "content": "Grape",
 52 |               "selected": false
 53 |             }
 54 |           ]	  
 55 | 
 56 | export default class RadioModalItem extends Component{
 57 | 	constructor(props){
 58 | 		super(props);
 59 | 		this.state = {
 60 |                 language:datas[3].selecteId,
 61 | 		item:datas[3].content,
 62 | 		initItem:'选项a',
 63 | 		initId:'0'
 64 |         };
 65 | 	}
 66 | 	render(){
 67 | 		return (
 68 | 			<View style={{padding:20,flex:1,flexDirection:'column'}}>
 69 | 			    <Text style={{backgroundColor:'#ffffff',color:'#414141',padding:5,}}>
 70 | 			      The selected:<Text style={{color:'#ff0000'}}>{this.state.item}</Text>	 
 71 | 			    </Text>	 
 72 | 			    <Text style={{backgroundColor:'#ffffff',color:'#414141',padding:5,}}>	 
 73 | 	                       Unique identification：<Text style={{color:'#ff0000'}}>{this.state.language}</Text>
 74 | 			    </Text>
 75 | 			    <RadioModal
 76 | 				options={{id:'selecteId',value:'content',disabled:'selected'}}
 77 | 				innerStyle={{width:(width-80)/2}}
 78 | 				txtColor={'#000000'}
 79 | 				noneColor={'#efefef'}
 80 | 				selectedValue={this.state.language}
 81 | 				onValueChange={(id,item) => this.setState({language: id,item:item})}
 82 | 				seledImg={require('./imgs/selected.png')}
 83 | 				selImg={require('./imgs/select.png')}
 84 | 				selnoneImg={require('./imgs/selectnone.png')}
 85 | 				dataOption={datas}
 86 | 				style={{ flexDirection:'row',
 87 | 					flexWrap:'wrap',
 88 | 					alignItems:'flex-start',
 89 | 					flex:1,
 90 | 					backgroundColor:'#ffffff',padding:5,marginTop:10
 91 | 				}} 
 92 | 			     />
 93 | 			     <Text style={{backgroundColor:'#ffffff',color:'#414141',padding:5,}}>
 94 | 				The selected:<Text style={{color:'#ff0000'}}>{this.state.initItem}</Text>	 
 95 | 			    </Text>	 
 96 | 			    <Text style={{backgroundColor:'#ffffff',color:'#414141',padding:5,}}>	 
 97 |                                  Unique identification：<Text style={{color:'#ff0000'}}>{this.state.initId}</Text>
 98 | 			    </Text>
 99 | 		            <RadioModal
100 | 				selectedValue={this.state.initId}
101 | 				onValueChange={(id,item) => this.setState({initId: id,initItem:item})}
102 | 				style={{ flexDirection:'row',
103 | 					  flexWrap:'wrap',
104 | 					  alignItems:'flex-start',
105 | 					  flex:1,
106 | 					  backgroundColor:'#ffffff',padding:5,marginTop:10
107 | 					  }} 
108 | 				>
109 | 				  <Text value="0">选项a</Text>
110 | 				  <Text value="1" disabled="true">选项b</Text>
111 | 				  <Text value="2">选项c</Text>
112 | 				  <Text value="3">选项d</Text>
113 | 			   </RadioModal>
114 | 		   </View>
115 | 
116 | 		);
117 | 	}
118 | }
119 | ```
120 | # Show
121 | <img src="https://github.com/antiantian/radio/blob/master/show.jpg"/>
122 | # Explain
123 | - Two ways of using
124 | 
125 |   -1.
126 | ```javascript
127 |    <RadioModal dataOption={data} />
128 |  ```
129 |   -2. 
130 | ```javascript
131 |       <RadioModal>
132 |           <Text value="0">选项a</Text>
133 | 	  <Text value="1" disabled="true">选项b</Text>
134 | 	  <Text value="2">选项c</Text>
135 | 	  <Text value="3">选项d</Text>
136 |       </RadioModal>
137 | ```
138 | # Customization
139 | - innerStyle：Style of each radio button
140 | - txtColor：Style of each radio button text
141 | - noneColor：No click on the button style
142 | - seledImg:Select Picture
143 | - selImg:default Picture
144 | - selnoneImg:disabled Picture
145 | - style：Outer style
146 | # Props 
147 | - options={{id:'selecteId',value:'content',disabled:'selected'}}  Set corresponding name
148 | - selectedValue：default id
149 | - dataOption: data
150 | 
151 | # Methods
152 | 
153 | - onValueChange={(id,item) => this.setState({initId: id,initItem:item})}  //return id(Unique identification) item（Text content）
154 | 


--------------------------------------------------------------------------------
/component/imgs/selt.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antiantian/radio/cc720b6fcfbe795bb723662157102102d5c4428b/component/imgs/selt.png


--------------------------------------------------------------------------------
/component/imgs/selted.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antiantian/radio/cc720b6fcfbe795bb723662157102102d5c4428b/component/imgs/selted.png


--------------------------------------------------------------------------------
/component/imgs/seltnone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antiantian/radio/cc720b6fcfbe795bb723662157102102d5c4428b/component/imgs/seltnone.png


--------------------------------------------------------------------------------
/component/radio.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Created by zcy on 2017/4/6.
  3 |  */
  4 | import React,{Component} from 'react'
  5 | import {
  6 | 	View,
  7 | 	StyleSheet,
  8 | 	TouchableHighlight,
  9 | 	Text,
 10 | 	Image,
 11 | } from 'react-native'
 12 | var Dimensions = require('Dimensions');
 13 | var width=Dimensions.get('window').width;
 14 | var height=Dimensions.get('window').height;
 15 | export default class RadioModal extends Component{
 16 | 	constructor(props){
 17 | 	  super(props);
 18 | 		this.state={
 19 | 			clicked:true,
 20 | 			radioInit:this.props.radioInit,
 21 | 			indexa:this.props.selectedValue===undefined?'0':this.props.selectedValue,
 22 | 		}
 23 | 	}
 24 | 	click(id,item){
 25 | 	 this.setState({indexa:id})
 26 | 	 this.props.onValueChange(id,item)
 27 | 	}
 28 | 	componentDidMount(){		
 29 | 			const indexInit=this.props.selectedValue===undefined?'0':this.props.selectedValue;
 30 | 			this.setState({
 31 | 				indexa:indexInit
 32 | 			})
 33 | 			//this.props.onValueChange(indexInit)
 34 | 	}
 35 | 	createInner(child,index,props){
 36 | 	const disabled=props?child[this.props.options.disabled]:child.props.disabled;	
 37 |     const childC=props?child[this.props.options.value]:child.props.children;
 38 |     const values=props?child[this.props.options.id]:child.props.value;
 39 |     const hightlight=props?this.state.indexa===child[this.props.options.id]:this.state.indexa===child.props.value;
 40 | 		return <Raio2 
 41 | 		      child={childC}
 42 |               index={index}
 43 |   		      value={values}
 44 |               key={index}
 45 | 			  initStyle={this.props.innerStyle}
 46 | 			  txtColor={this.props.txtColor}
 47 | 			  noneColor={this.props.noneColor}
 48 |   		      onclick={this.click.bind(this)}
 49 |               hightlight={hightlight}
 50 | 			  disabled={disabled}
 51 |               seledImg={this.props.seledImg}
 52 |               selImg={this.props.selImg}
 53 | 			  selnoneImg={this.props.selnoneImg}
 54 | 			/>
 55 | 	}
 56 | 	render(){
 57 | 		const that=this;
 58 | 		return(
 59 | 		 <View {...this.props.style}>
 60 | 		      {
 61 | 				!this.props.dataOption&&React.Children.map(this.props.children,(child,index)=>this.createInner(child,index))
 62 | 			  }
 63 |         {
 64 |           this.props.dataOption&&this.props.dataOption.map((item,index)=>this.createInner(item,index,true))
 65 |         }
 66 | 		 </View>
 67 | 		)
 68 | 	}
 69 | }
 70 | 
 71 | class Raio2 extends Component{
 72 | 	constructor(props){
 73 | 	    super(props);
 74 | 	}
 75 | 	click(id,item){
 76 | 		if(this.props.disabled){
 77 | 			return
 78 | 		}else{
 79 | 			this.props.onclick(id,item);
 80 | 		}  
 81 | 	}
 82 | 	render(){
 83 | 		imgUrl=this.props.hightlight?this.props.seledImg||require('./imgs/selted.png'):this.props.selImg||require('./imgs/selt.png');
 84 | 		imgUrlNone=this.props.selnoneImg||require('./imgs/seltnone.png');
 85 | 		return(
 86 | 		    <TouchableHighlight
 87 | 			   underlayColor='transparent'
 88 | 			   style={[{marginRight:15,width:(width-80)/2,height:24},this.props.initStyle]}
 89 | 			   onPress={this.click.bind(this,this.props.value,this.props.child)}>
 90 |   				<View  style={{flex:1,flexDirection:'row',alignItems:'center'}} >
 91 | 					{this.props.disabled&&!this.props.hightlight&&<Image source={imgUrlNone} style={{width:14,height:14,marginRight:7}}/>}
 92 | 					{this.props.disabled&&this.props.hightlight&&<Image source={imgUrl} style={{width:14,height:14,marginRight:7}}/>}
 93 | 					{!this.props.disabled&&<Image source={imgUrl} style={{width:14,height:14,marginRight:7}}/>}
 94 |   				  <Text style={{color:this.props.disabled?this.props.noneColor||'#dfdfdf':this.props.txtColor||'#414141'}}>{this.props.child}</Text>
 95 |   				</View>
 96 | 			</TouchableHighlight>
 97 | 		)
 98 | 	}
 99 | }
100 | const styles=StyleSheet.create({
101 | 	titleCom:{
102 | 		marginBottom:5,
103 | 	},
104 | 	seltedImgs:{
105 | 		width:14,
106 | 		height:14,
107 | 		marginRight:8,
108 | 	},
109 | 	emailH:{
110 | 	 height:28,
111 | 	 textAlignVertical:'center',
112 | 	 marginRight:10,
113 | 	 color:'#141414',
114 | 	 fontSize:12,
115 | 	},
116 | 	inputs:{
117 | 		width:width*0.5,
118 | 		borderWidth:1,
119 | 		borderColor:'#dfdfdf',
120 | 		borderRadius:3,
121 | 		height:28,
122 | 		padding:0,
123 | 		paddingLeft:5,
124 | 		paddingRight:5,
125 | 		marginBottom:10,
126 | 		fontSize:12,
127 | 	},
128 | 	closeBtns:{
129 | 		position:'absolute',
130 | 		width:14,
131 | 		height:14,
132 | 		right:10,
133 | 		top:7,
134 | 	},
135 | 	headLog:{
136 | 	  backgroundColor:'#e6454a',
137 | 	  color:'#ffffff',
138 | 	  height:28,
139 | 	  textAlignVertical:'center',
140 | 	  textAlign:'center'
141 | 	},
142 | 	border1:{
143 | 		borderWidth:1,
144 | 		borderColor:'#dfdfdf',
145 | 	},
146 | 	borderR:{
147 | 		borderRightWidth:1,
148 | 		borderRightColor:'#dfdfdf',
149 | 	},
150 | 	borderL:{
151 | 		borderLeftWidth:1,
152 | 		borderLeftColor:'#dfdfdf',
153 | 	},
154 | 	eleMess:{
155 | 		paddingLeft:10,
156 | 		paddingRight:10,
157 | 		height:24,
158 | 		fontSize:12,
159 | 		color:'#ffffff',
160 | 		backgroundColor:'#f8cb43',
161 | 		borderRadius:3,
162 | 		textAlignVertical:'center',
163 | 		textAlign:'center',
164 | 		width:80,
165 | 	},
166 | 	electronicTip:{
167 | 		width:(width-40)/5,
168 | 		flexDirection:'row',
169 | 		justifyContent:'center',
170 | 		paddingTop:10,
171 | 		paddingBottom:10,
172 | 	},
173 | 	lineRow:{
174 | 		backgroundColor:'#ffffff',
175 | 		borderRadius:3,
176 | 		flexDirection:'row',
177 | 		flex:1,
178 | 		marginBottom:15,
179 | 		padding:10,
180 | 		alignItems:'center',
181 | 		justifyContent:'space-between',
182 | 		flexWrap:'wrap',
183 | 		alignItems: 'flex-start',
184 | 		
185 | 	},
186 | 	lineRowB:{
187 | 		backgroundColor:'#ffffff',
188 | 		borderRadius:3,
189 | 		flexDirection:'row',
190 | 		flex:1,
191 | 		marginBottom:15,
192 | 		paddingLeft:10,
193 | 		paddingRight:10,
194 | 		alignItems:'center',
195 | 	},
196 | 	inner3:{
197 | 		width:(width-40)/3,
198 | 		fontSize:12,
199 | 		color:'#141414'
200 | 	},
201 | 	innerS:{
202 | 		flexDirection:'row',
203 |         flex:1,
204 | 		fontSize:12,
205 | 		color:'#141414'
206 | 	},
207 | 	flex1:{
208 | 		flex:1
209 | 	},
210 | 	flexRow:{
211 | 
212 | 	   flexDirection:'row',
213 | 	 },
214 | 	flexVer:{
215 | 		flexDirection:'column',
216 | 	},
217 | 	Jcenter:{
218 | 		justifyContent:'center',
219 | 	},
220 | 	Acenter:{
221 | 		alignItems:'center',
222 | 	},
223 | 	BE:{
224 | 		justifyContent:'space-between'
225 | 	},
226 | 	Textcenter:{
227 | 		textAlign:'center',
228 | 	},
229 | 	TextCenterVer:{
230 | 		textAlignVertical:'center',
231 | 	},
232 | 	backCGray:{
233 | 	  backgroundColor:'#dfdfdf'
234 |     },
235 | 	backWhite:{
236 | 		backgroundColor:'#ffffff',
237 | 	},
238 | 	borderRadius5:{
239 | 		borderRadius:5,
240 | 	},
241 | 	borderRadius3:{
242 | 		borderRadius:3,
243 | 	},
244 | 	horLine:{
245 | 		flexDirection:'row',
246 | 		flex:1,		
247 | 		flexWrap:'wrap',
248 | 		alignItems: 'flex-start',
249 | 		marginBottom:10,
250 | 		},
251 | 	paddlr10:{
252 | 	   paddingLeft:10,
253 | 	   paddingRight:10,
254 |     },
255 | 	marginB10:{
256 | 		marginBottom:10,
257 | 	},
258 | 	colorRed:{
259 | 	   color:'#b40e12',
260 | 	},
261 | 	colorBlack:{
262 | 	   color:'#141414',
263 | 	},
264 | 	colorYellow:{
265 | 	   color:'#f8cb43', 
266 | 	},
267 | 	color999:{
268 | 	   color:'#999999',
269 | 	},
270 | 	colorWhite:{
271 | 	   color:'#ffffff',
272 |     },	
273 | })
274 | 


--------------------------------------------------------------------------------
/example/comon/imgs/select.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antiantian/radio/cc720b6fcfbe795bb723662157102102d5c4428b/example/comon/imgs/select.png


--------------------------------------------------------------------------------
/example/comon/imgs/selected.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antiantian/radio/cc720b6fcfbe795bb723662157102102d5c4428b/example/comon/imgs/selected.png


--------------------------------------------------------------------------------
/example/comon/imgs/selectnone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antiantian/radio/cc720b6fcfbe795bb723662157102102d5c4428b/example/comon/imgs/selectnone.png


--------------------------------------------------------------------------------
/example/comon/imgs/selt.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antiantian/radio/cc720b6fcfbe795bb723662157102102d5c4428b/example/comon/imgs/selt.png


--------------------------------------------------------------------------------
/example/comon/imgs/selted.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antiantian/radio/cc720b6fcfbe795bb723662157102102d5c4428b/example/comon/imgs/selted.png


--------------------------------------------------------------------------------
/example/comon/imgs/seltnone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antiantian/radio/cc720b6fcfbe795bb723662157102102d5c4428b/example/comon/imgs/seltnone.png


--------------------------------------------------------------------------------
/example/comon/radio.js:
--------------------------------------------------------------------------------
  1 | import React,{Component} from 'react'
  2 | import {
  3 | 	View,
  4 | 	StyleSheet,
  5 | 	Navigator,
  6 | 	TouchableHighlight,
  7 | 	Text,
  8 | 	ScrollView,
  9 | 	Image,
 10 | 	ListView,
 11 | } from 'react-native'
 12 | var Dimensions = require('Dimensions');
 13 | var width=Dimensions.get('window').width;
 14 | var height=Dimensions.get('window').height;
 15 | import RadioModal from 'react-native-radio-master';
 16 | var datas= [
 17 |             {
 18 |               "selecteId": 13,
 19 |               "content": "Apple",
 20 |               "selected": false
 21 |             },
 22 |             {
 23 |               "selecteId": 14,
 24 |               "content": "Banana",
 25 |               "selected": false
 26 |             },
 27 |             {
 28 |               "selecteId": 15,
 29 |               "content": "Orange",
 30 |               "selected": false
 31 |             },
 32 |             {
 33 |               "selecteId": 16,
 34 |               "content": "Watermelon",
 35 |               "selected": true
 36 |             },
 37 |             {
 38 |               "selecteId": 17,
 39 |               "content": "Grape",
 40 |               "selected": false
 41 |             }
 42 |           ]	  
 43 | 
 44 | export default class RadioModalItem extends Component{
 45 | 	constructor(props){
 46 | 		super(props);
 47 | 		this.state = {
 48 |             language:datas[3].selecteId,
 49 | 			item:datas[3].content,
 50 | 			initItem:'选项a',
 51 | 			initId:'0'
 52 |         };
 53 | 	}
 54 | 	render(){
 55 | 		return (
 56 | 				<View style={{padding:20,flex:1,flexDirection:'column'}}>
 57 | 				    <Text style={{backgroundColor:'#ffffff',color:'#414141',padding:5,}}>
 58 | 				     The selected:<Text style={{color:'#ff0000'}}>{this.state.item}</Text>	 
 59 | 				    </Text>	 
 60 | 				    <Text style={{backgroundColor:'#ffffff',color:'#414141',padding:5,}}>	 
 61 |                      Unique identification：<Text style={{color:'#ff0000'}}>{this.state.language}</Text>
 62 | 				    </Text>
 63 | 				    <RadioModal
 64 | 					    options={{id:'selecteId',value:'content',disabled:'selected'}}
 65 | 						innerStyle={{width:(width-80)/2}}
 66 | 						txtColor={'#000000'}
 67 | 						noneColor={'#efefef'}
 68 | 						selectedValue={this.state.language}
 69 | 						onValueChange={(id,item) => this.setState({language: id,item:item})}
 70 | 						seledImg={require('./imgs/selected.png')}
 71 | 						selImg={require('./imgs/select.png')}
 72 | 						selnoneImg={require('./imgs/selectnone.png')}
 73 | 						dataOption={datas}
 74 | 						style={{ flexDirection:'row',
 75 | 							  flexWrap:'wrap',
 76 | 							  alignItems:'flex-start',
 77 | 							  flex:1,
 78 | 							  backgroundColor:'#ffffff',padding:5,marginTop:10
 79 | 							  }} 
 80 | 				      />
 81 | 				     <Text style={{backgroundColor:'#ffffff',color:'#414141',padding:5,}}>
 82 | 				            The selected:<Text style={{color:'#ff0000'}}>{this.state.initItem}</Text>	 
 83 | 				      </Text>	 
 84 | 				      <Text style={{backgroundColor:'#ffffff',color:'#414141',padding:5,}}>	 
 85 |                                             Unique identification：<Text style={{color:'#ff0000'}}>{this.state.initId}</Text>
 86 | 				      </Text>
 87 | 		                      <RadioModal
 88 | 						selectedValue={this.state.initId}
 89 | 						onValueChange={(id,item) => this.setState({initId: id,initItem:item})}
 90 | 						style={{ flexDirection:'row',
 91 | 							  flexWrap:'wrap',
 92 | 							  alignItems:'flex-start',
 93 | 							  flex:1,
 94 | 							  backgroundColor:'#ffffff',padding:5,marginTop:10
 95 | 							  }} 
 96 | 						>
 97 | 						  <Text value="0">选项a</Text>
 98 | 						  <Text value="1" disabled="true">选项b</Text>
 99 | 						  <Text value="2">选项c</Text>
100 | 						  <Text value="3">选项d</Text>
101 | 				       </RadioModal>
102 | 				</View>
103 | 
104 | 		);
105 | 	}
106 | }
107 | const styles=StyleSheet.create({
108 | 	titleCom:{
109 | 		marginBottom:5,
110 | 	},
111 | 	seltedImgs:{
112 | 		width:14,
113 | 		height:14,
114 | 		marginRight:8,
115 | 	},
116 | 	emailH:{
117 | 	 height:28,
118 | 	 textAlignVertical:'center',
119 | 	 marginRight:10,
120 | 	 color:'#141414',
121 | 	 fontSize:12,
122 | 	},
123 | 	inputs:{
124 | 		width:width*0.5,
125 | 		borderWidth:1,
126 | 		borderColor:'#dfdfdf',
127 | 		borderRadius:3,
128 | 		height:28,
129 | 		padding:0,
130 | 		paddingLeft:5,
131 | 		paddingRight:5,
132 | 		marginBottom:10,
133 | 		fontSize:12,
134 | 	},
135 | 	closeBtns:{
136 | 		position:'absolute',
137 | 		width:14,
138 | 		height:14,
139 | 		right:10,
140 | 		top:7,
141 | 	},
142 | 	headLog:{
143 | 	  backgroundColor:'#e6454a',
144 | 	  color:'#ffffff',
145 | 	  height:28,
146 | 	  textAlignVertical:'center',
147 | 	  textAlign:'center'
148 | 	},
149 | 	border1:{
150 | 		borderWidth:1,
151 | 		borderColor:'#dfdfdf',
152 | 	},
153 | 	borderR:{
154 | 		borderRightWidth:1,
155 | 		borderRightColor:'#dfdfdf',
156 | 	},
157 | 	borderL:{
158 | 		borderLeftWidth:1,
159 | 		borderLeftColor:'#dfdfdf',
160 | 	},
161 | 	eleMess:{
162 | 		paddingLeft:10,
163 | 		paddingRight:10,
164 | 		height:24,
165 | 		fontSize:12,
166 | 		color:'#ffffff',
167 | 		backgroundColor:'#f8cb43',
168 | 		borderRadius:3,
169 | 		textAlignVertical:'center',
170 | 		textAlign:'center',
171 | 		width:80,
172 | 	},
173 | 	electronicTip:{
174 | 		width:(width-40)/5,
175 | 		flexDirection:'row',
176 | 		justifyContent:'center',
177 | 		paddingTop:10,
178 | 		paddingBottom:10,
179 | 	},
180 | 	lineRow:{
181 | 		backgroundColor:'#ffffff',
182 | 		borderRadius:3,
183 | 		flexDirection:'row',
184 | 		flex:1,
185 | 		marginBottom:15,
186 | 		padding:10,
187 | 		alignItems:'center',
188 | 		justifyContent:'space-between',
189 | 		flexWrap:'wrap',
190 | 		alignItems: 'flex-start',
191 | 		
192 | 	},
193 | 	lineRowB:{
194 | 		backgroundColor:'#ffffff',
195 | 		borderRadius:3,
196 | 		flexDirection:'row',
197 | 		flex:1,
198 | 		marginBottom:15,
199 | 		paddingLeft:10,
200 | 		paddingRight:10,
201 | 		alignItems:'center',
202 | 	},
203 | 	inner3:{
204 | 		width:(width-40)/3,
205 | 		fontSize:12,
206 | 		color:'#141414'
207 | 	},
208 | 	innerS:{
209 | 		flexDirection:'row',
210 |         flex:1,
211 | 		fontSize:12,
212 | 		color:'#141414'
213 | 	},
214 | 	flex1:{
215 | 		flex:1
216 | 	},
217 | 	flexRow:{
218 | 
219 | 	   flexDirection:'row',
220 | 	 },
221 | 	flexVer:{
222 | 		flexDirection:'column',
223 | 	},
224 | 	Jcenter:{
225 | 		justifyContent:'center',
226 | 	},
227 | 	Acenter:{
228 | 		alignItems:'center',
229 | 	},
230 | 	BE:{
231 | 		justifyContent:'space-between'
232 | 	},
233 | 	Textcenter:{
234 | 		textAlign:'center',
235 | 	},
236 | 	TextCenterVer:{
237 | 		textAlignVertical:'center',
238 | 	},
239 | 	backCGray:{
240 | 	  backgroundColor:'#dfdfdf'
241 |     },
242 | 	backWhite:{
243 | 		backgroundColor:'#ffffff',
244 | 	},
245 | 	borderRadius5:{
246 | 		borderRadius:5,
247 | 	},
248 | 	borderRadius3:{
249 | 		borderRadius:3,
250 | 	},
251 | 	horLine:{
252 | 		flexDirection:'row',
253 | 		flex:1,		
254 | 		flexWrap:'wrap',
255 | 		alignItems: 'flex-start',
256 | 		marginBottom:10,
257 | 		},
258 | 	paddlr10:{
259 | 	   paddingLeft:10,
260 | 	   paddingRight:10,
261 |     },
262 | 	marginB10:{
263 | 		marginBottom:10,
264 | 	},
265 | 	colorRed:{
266 | 	   color:'#b40e12',
267 | 	},
268 | 	colorBlack:{
269 | 	   color:'#141414',
270 | 	},
271 | 	colorYellow:{
272 | 	   color:'#f8cb43', 
273 | 	},
274 | 	color999:{
275 | 	   color:'#999999',
276 | 	},
277 | 	colorWhite:{
278 | 	   color:'#ffffff',
279 |     },	
280 | })
281 | 


--------------------------------------------------------------------------------
/example/index.android.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Sample React Native App
 3 |  * https://github.com/facebook/react-native
 4 |  * @flow
 5 |  */
 6 | 
 7 | import React, { Component } from 'react';
 8 | 
 9 | import {
10 |   AppRegistry,
11 |   StyleSheet,
12 |   Text,
13 |   View,
14 |   Navigator,
15 |   TouchableHighlight,
16 |   StatusBar,
17 |   TouchableOpacity,
18 |   Image
19 | } from 'react-native';
20 | import RadioModalItem from './comon/radio'
21 | export default class AwesomeProject extends Component{
22 |     render(){
23 |       return (
24 | 		   <RadioModalItem/>
25 |       );
26 |     }
27 |  };
28 | 
29 |  const styles = StyleSheet.create({
30 |    backImage:{
31 |      width:13,
32 |      height:26,
33 |    },
34 |    container: {
35 |      flex: 1,
36 |    },
37 |    navBar: {
38 |      backgroundColor: 'white',
39 | 	 display:'none',
40 |    },
41 |    button: {
42 |      padding: 15,
43 |    },
44 |    containView:{
45 |      flex: 1,
46 |      backgroundColor:'gray',
47 |      justifyContent: 'center',
48 |    },
49 |    detailContainView:{
50 |      flex:1,
51 |      justifyContent: 'center',
52 |      backgroundColor:'green',
53 |    },
54 |    blackText:{
55 |      fontSize:20,
56 |      textAlign:'center',
57 |    },
58 |    navBar: {
59 |     backgroundColor: 'white',
60 |    },
61 |   navBarText: {
62 |     fontSize: 16,
63 |     marginVertical: 10,
64 |   },
65 |   navBarTitleText: {
66 |     color: '#373E4D',
67 |     fontWeight: '500',
68 |     marginVertical: 9,
69 |   },
70 |   navBarLeftButton: {
71 |     paddingLeft: 10,
72 |     paddingTop:6,
73 |   },
74 |   navBarRightButton: {
75 |     paddingRight: 10,
76 |   },
77 |   navBarButtonText: {
78 |     color: '#5890FF',
79 |   },
80 |  });
81 | 
82 | AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
83 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | /**
2 |  * Created by zcy on 2017/4/6.
3 |  */
4 | 
5 | import RadioModal from './component/radio';
6 | export default RadioModal;
7 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-native-radio-model",
 3 |   "version": "1.0.0",
 4 |   "description": "a react-native radio component for android and ios ,user can customit freedom",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/antiantian/radio.git"
12 |   },
13 |   "keywords": [
14 |     "react",
15 |     "react-native",
16 |     "radio",
17 |     "select",
18 |     "radiogroup"
19 |   ],
20 |   "author": "anyutz",
21 |   "license": "MIT",
22 |   "bugs": {
23 |     "url": "https://github.com/antiantian/radio/issues"
24 |   },
25 |   "homepage": "https://github.com/antiantian/radio#readme"
26 | }
27 | 


--------------------------------------------------------------------------------
/show.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antiantian/radio/cc720b6fcfbe795bb723662157102102d5c4428b/show.jpg


--------------------------------------------------------------------------------