Nút Radio Flexi React Native
Nút Radio đơn giản và linh hoạt cho ứng dụng React Native
Cài đặt
npm i react-native-flexi-radio-button --save
Sử dụng
Ví dụ Cơ bản see full basic example
 |
 |
|---|---|
import {RadioGroup, RadioButton} from 'react-native-flexi-radio-button'
onSelect(index, value){
this.setState({
text: `Selected index: ${index} , value: ${value}`
})
}
render(){
return(
<View style={styles.container}>
<RadioGroup
onSelect = {(index, value) => this.onSelect(index, value)}
>
<RadioButton value={'item1'} >
<Text>This is item #1</Text>
</RadioButton>
<RadioButton value={'item2'}>
<Text>This is item #2</Text>
</RadioButton>
<RadioButton value={'item3'}>
<Text>This is item #3</Text>
</RadioButton>
</RadioGroup>
<Text style={styles.text}>{this.state.text}</Text>
</View>
)
}
Ví dụ Tùy chỉnh see full custom example
 |
 |
|---|---|
sửa trong render()
<RadioGroup
size={24}
thickness={2}
color='#9575b2'
highlightColor='#ccc8b9'
selectedIndex={1}
onSelect = {(index, value) => this.onSelect(index, value)}
>
<RadioButton
style={{alignItems:'center'}}
value='Yo!! I am a cat.'
>
<Image
style={{width:100, height: 100}}
source={{uri:'https://cloud.githubusercontent.com/assets/21040043/18446298/fa576974-794b-11e6-8430-b31b30846084.jpg'}}
/>
</RadioButton>
<RadioButton
value='index1'
>
<Text>Start from item index #1</Text>
</RadioButton>
<RadioButton
value='red color'
color='red'
>
<Text>Red Dot</Text>
</RadioButton>
<RadioButton
value='green color'
color='green'
>
<Text>Green Dot</Text>
</RadioButton>
<RadioButton
value='blue color'
color='blue'
>
<Text>Blue Dot</Text>
</RadioButton>
</RadioGroup>
Cấu hình
Nhóm Radio:
| Thuộc tính | Loại | Mặc định | Mô tả |
|---|---|---|---|
| kích thước | số | 20 | Kích thước của nút radio |
| độ dày | số | 1 | độ dày của viền nút radio |
| màu | chuỗi | ‘#007AFF’ | màu của nút radio |
| màu hoạt động | chuỗi | null | màu của nút radio khi được chọn |
| màu nền | chuỗi | null | nền của nút radio sau khi được chọn |
| selectedIndex | số | null | chỉ mục mặc định được chọn của nhóm radio, có thể thay đổi thành giá trị mới hoặc thành null để xóa lựa chọn |
| style | đối tượng | null | Các kiểu tùy chỉnh được áp dụng nếu được cung cấp |
| onSelect | hàm(index, giá trị) | null | hàm sẽ được gọi khi nút radio được chọn |
Nút Radio:
| Thuộc tính | Loại | Mặc định | Mô tả |
|---|---|---|---|
| giá trị | bất kỳ | null | giá trị sẽ được truyền trong cuộc gọi lại onSelect như tham số thứ hai |
| style | đối tượng | null | Các kiểu được áp dụng trên thành phần ‘RadioButton’ |
| màu | chuỗi | giống như thành phần ‘RadioGroup’ | màu của dấu radio |
| bị tắt | bool | false | Nếu là đúng, tắt tất cả tương tác cho thành phần này. |
Chi tiết tải về:
Tác giả: thegamenicorus
Mã nguồn: https://github.com/thegamenicorus/react-native-flexi-radio-button
Giấy phép: MIT license
Cảm ơn bạn!
