zoukankan      html  css  js  c++  java
  • react native RadioButton(单选按钮)

    刚刚写完这个多选按钮,我觉得没有单选的话,总会觉得有一点点不爽,因为在项目中我也没有用到单选,所以我没有好好研究源码,所以我在Github上找了一下,发现有一个挺好的,简单,不花哨。

    在Github上搜索这个

    react-native-flexi-radio-button

    下载好以后,就可以直接用了。

     1 import React, { Component } from 'react';
     2 import {
     3   StyleSheet,
     4   Text,
     5   View
     6 } from 'react-native';
     7 
     8 import {RadioGroup, RadioButton} from 'react-native-flexi-radio-button'
     9 
    10 class App extends Component{
    11 
    12     constructor(){
    13         super()
    14         this.state = {
    15             text: ''
    16         }
    17         this.onSelect = this.onSelect.bind(this)
    18     }
    19 
    20     onSelect(index, value){
    21         this.setState({
    22         text: `Selected index: ${index} , value: ${value}`
    23         })
    24     }
    25 
    26     render(){
    27         return(
    28             <View style={styles.container}>
    29                 <RadioGroup
    30                     onSelect = {(index, value) => this.onSelect(index, value)}
    31                 >
    32                     <RadioButton value={'item1'} >
    33                         <Text>This is item #1</Text>
    34                     </RadioButton>
    35 
    36                     <RadioButton value={'item2'}>
    37                         <Text>This is item #2</Text>
    38                     </RadioButton>
    39 
    40                     <RadioButton value={'item3'}>
    41                         <Text>This is item #3</Text>
    42                     </RadioButton>
    43 
    44                 </RadioGroup>
    45                 
    46                 <Text style={styles.text}>{this.state.text}</Text>
    47             </View>
    48         )
    49     }
    50 }
    51 
    52 let styles = StyleSheet.create({
    53     container: {
    54         marginTop: 40,
    55         padding: 20
    56     },
    57     text: {
    58         padding: 10,
    59         fontSize: 14,
    60     },
    61 })
    62 
    63 module.exports = App
    
    
  • 相关阅读:
    Vue源码学习(二)——生命周期
    Android MediaPlayer
    iOS项目开发实战——iOS网络编程获取网页Html源码
    iOS 开发之IPad的设计与实现
    Netty In Action中文版
    Valid Palindrome
    Jetty 类载入问题处理
    JSONArray和JSONObject的简单使用
    ExtAspNet依据Grid导出Excel
    C++中的指针、数组指针与指针数组、函数指针与指针函数
  • 原文地址:https://www.cnblogs.com/huangjialin/p/6180200.html
Copyright © 2011-2022 走看看