[英]How to implement radio button in React Native
我正在將 React 代碼轉換為 React Native。 所以我需要實現單選按鈕。
您可以使用准系統 RN 非常輕松地模擬單選按鈕。 這是我使用的一個簡單實現。 根據需要調整大小、顏色等。 它看起來像這樣(具有不同的色調和一些文字)。 在頂部添加TouchableOpacity
以將其變成可以執行某些操作的按鈕。
function RadioButton(props) {
return (
<View style={[{
height: 24,
width: 24,
borderRadius: 12,
borderWidth: 2,
borderColor: '#000',
alignItems: 'center',
justifyContent: 'center',
}, props.style]}>
{
props.selected ?
<View style={{
height: 12,
width: 12,
borderRadius: 6,
backgroundColor: '#000',
}}/>
: null
}
</View>
);
}
這是創建單選按鈕的另一種方式(來源,感謝 php step by step 頻道)
方法一
constructor(props) {
super(props);
this.state = {
radioBtnsData: ['Item1', 'Item2', 'Item3'],
checked: 0
}
}
import { View, TextInput, TouchableOpacity } from 'react-native';
{this.state.radioBtnsData.map((data, key) => {
return (
<View key={key}>
{this.state.checked == key ?
<TouchableOpacity style={styles.btn}>
<Image style={styles.img} source={require("./img/rb_selected.png")}/>
<Text>{data}</Text>
</TouchableOpacity>
:
<TouchableOpacity onPress={()=>{this.setState({checked: key})}} style={styles.btn}>
<Image style={styles.img} source={require("./img/rb_unselected.png")} />
<Text>{data}</Text>
</TouchableOpacity>
}
</View>
)
})}
const styles = StyleSheet.create({
img:{
height:20,
width: 20
},
btn:{
flexDirection: 'row'
}
});
將下面的圖像放在img文件夾中
方法二
為新開發人員精心設計的 LaneRettig ex
感謝 Lane Rettig
constructor(props){
super(props);
this.state = {
radioSelected: 1
}
}
radioClick(id) {
this.setState({
radioSelected: id
})
}
render() {
const products = [{
id: 1
},
{
id: 2
},
{
id: 3
}];
return (
products.map((val) => {
return (
<TouchableOpacity key={val.id} onPress={this.radioClick.bind(this, val.id)}>
<View style={{
height: 24,
width: 24,
borderRadius: 12,
borderWidth: 2,
borderColor: '#000',
alignItems: 'center',
justifyContent: 'center',
}}>
{
val.id == this.state.radioSelected ?
<View style={{
height: 12,
width: 12,
borderRadius: 6,
backgroundColor: '#000',
}} />
: null
}
</View>
</TouchableOpacity>
)
})
);
}
有一個叫做react-native-radio-buttons的 react-native 組件可以做一些你需要的事情:
這是我使用功能組件的單選按鈕解決方案。
注意- 我已將圖像用於選中和未選中的單選圖標
import React, {useState} from 'react';
import {View, Text, StyleSheet, TouchableOpacity, Image} from 'react-native';
const Radio = () => {
const [checked, setChecked] = useState(0);
var gender = ['Male', 'Female'];
return (
<View>
<View style={styles.btn}>
{gender.map((gender, key) => {
return (
<View key={gender}>
{checked == key ? (
<TouchableOpacity style={styles.btn}>
<Image
style={styles.img}
source={require('../images/radio_Checked.jpg')}
/>
<Text>{gender}</Text>
</TouchableOpacity>
) : (
<TouchableOpacity
onPress={() => {
setChecked(key);
}}
style={styles.btn}>
<Image
style={styles.img}
source={require('../images/radio_Unchecked.png')}
/>
<Text>{gender}</Text>
</TouchableOpacity>
)}
</View>
);
})}
</View>
{/* <Text>{gender[checked]}</Text> */}
</View>
);
};
const styles = StyleSheet.create({
radio: {
flexDirection: 'row',
},
img: {
height: 20,
width: 20,
marginHorizontal: 5,
},
btn: {
flexDirection: 'row',
alignItems: 'center',
},
});
export default Radio;
我在react-native
使用Checkbox
來創建單選按鈕。 請參考以下代碼。
constructor(props){
super(props);
this.state = {radioButton:'value1'};
}
render(){
return(
<View>
<CheckBox
title='value1'
checkedIcon='dot-circle-o'
uncheckedIcon='circle-o'
checked={this.state.radioButton === 'value1'}
onPress={() => this.setState({radioButton: 'value1'})}
></CheckBox>
<CheckBox
title='value2'
checkedIcon='dot-circle-o'
uncheckedIcon='circle-o'
checked={this.state.radioButton === 'value2'}
onPress={() => this.setState({radioButton: 'value2'})}
></CheckBox>
<CheckBox
title='value3'
checkedIcon='dot-circle-o'
uncheckedIcon='circle-o'
checked={this.state.radioButton === 'value3'}
onPress={() => this.setState({radioButton: 'value3'})}
></CheckBox>
<CheckBox
title='value4'
checkedIcon='dot-circle-o'
uncheckedIcon='circle-o'
checked={this.state.radioButton === 'value4'}
onPress={() => this.setState({radioButton: 'value4'})}
></CheckBox>
<CheckBox
title='value5'
checkedIcon='dot-circle-o'
uncheckedIcon='circle-o'
checked={this.state.radioButton === 'value5'}
onPress={() => this.setState({radioButton: 'value5'})}
></CheckBox>
</View>
);
}
您可以使用 react-native-radio-input。 它的使用非常簡單。
import RadioGroup,{Radio} from "react-native-radio-input";
.
.
.
//Receive the checked value (ES6 syntax)
getChecked = (value) => {
// value = our checked value
alert(value)
}
<RadioGroup getChecked={this.getChecked}>
<Radio iconName={"lens"} label={"The first option"} value={"A"} />
<Radio iconName={"lens"} label={"The first option"} value={"B"} />
<Radio iconName={"lens"} label={"I need numbers"} value={1} />
<Radio label={"Is IconName Optional?"} value={"Yes"} />
<Radio label={"Show Sentence Value"} value={"This is a Sentence"} />
</RadioGroup>
.
.
也許您可以將樣式設置為圓形按鈕,例如單選按鈕或其他東西:
const period = [
{
key: 1,
name : '1 Month',
value : 1,
},
{
key : 2,
name : '12 Month',
value : 12,
}
];
constructor(props) {
super(props);
this.state = {
value: 0,
};
}
onChangeTabs = (tabs) => {
this.setState({
value : tabs,
})
}
renderTabs = () => {
return period.map(item => (
<TouchableWithoutFeedback
key={item.key}
value={item.value}
onPress={this.onChangeTabs.bind(this, item.value)}
>
<View style={this.state.value == item.value ? styles.periodActive : styles.period}>
<Text style={styles.periodText}>{item.name}</Text>
</View>
</TouchableWithoutFeedback>
));
};
const styles = StyleSheet.create({
period: {
borderRadius: 5,
borderColor: '#fff',
borderWidth: 1,
marginHorizontal: 5,
},
periodActive: {
backgroundColor: '#333',
},
});
import RadioForm, { RadioButton, RadioButtonInput, RadioButtonLabel } from 'react-native-simple-radio-button';
const radioProps = [
{ label: 'Male', value: false },
{ label: 'Female, value: true }
];
<View style={{ marginTop: 30 }}>
<RadioForm
buttonColor={gray}
buttonSize={12}
radioStyle={{paddingTop:25}}
selectedButtonColor="#000000"
radio_props={radioProps}
initial={0}
animation={false}
onPress={(value) => setGender(value)}
/>
</View>
我正在使用我自己的自定義單選按鈕組。它的樣式也可以自定義。
// radio button component
import React, { useState } from 'react'
import { Text, TouchableOpacity, View } from 'react-native'
const RadioButtons = (props) => {
const radioPress = () => {
props.setChecked(props?.item?.id)
}
return (
<View style={{
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
margin:5,
}}>
<TouchableOpacity style={{
}} onPress={radioPress}>
<View style={[{
height: 24,
width: 24,
borderRadius: 12,
borderWidth: 2,
borderColor: '#000',
alignItems: 'center',
justifyContent: 'center',
}, props.style]}>
{
props?.checked == props?.item?.id ?
<View style={{
height: 12,
width: 12,
borderRadius: 6,
backgroundColor: '#000',
}} />
: null
}
</View>
</TouchableOpacity>
<Text style={{
marginLeft: 5,
fontWeight:"500",
fontSize:20,
textTransform:"capitalize"
}}>
{props?.item?.label}
</Text>
</View>
)
}
export default RadioButtons
在任何地方使用,例如:
<View style={{
flexDirection:"row",
flexWrap:"wrap",
}}>
{
[{label:'male',id:0}, {label:'female',id:1},
{label:'other',id:2}].map((item,i)=>{
return(
<RadioButtons key={i} item={item} checked=
{checked} setChecked={setChecked} />
)
})
}
</View>
import React, { useState } from "react";
import { Ionicons } from "@expo/vector-icons";
import { View, Text, TouchableOpacity } from "react-native";
export default function RadioButton() {
const [radioButton, setRadioButton] = useState("Yes");
return (
<View style={{ flexDirection: "row", justifyContent: "space-around" }}>
<TouchableOpacity onPress={() => setRadioButton("Yes")}>
<Text>
<Ionicons name={ radioButton === "Yes" ? "radio-button-on" : "radio-button-off" } size={18} color="green" />
Yes
</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => setRadioButton("No")}>
<Text>
<Ionicons name={radioButton === "No" ? "radio-button-on" : "radio-button-off"} size={18} color="green" />
No
</Text>
</TouchableOpacity>
</View>
)}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.