Radio單選框

1、功能說明

用於在多個備選項中選中單個狀態。

Radio 所有選項預設可見，方便使用者在比較中選擇，因此選項不宜過多

2、元件效果

3、程式碼演示

import React, { Component } from "react";
import { Alert, View, Text, StyleSheet, TouchableOpacity, Image, ScrollView } from "react-native";
import { Radio } from "@/rn-design";
const RadioButton = Radio.Button;
const styles = StyleSheet.create({
    content: {
        flexDirection: "row",
        alignItems: "center",
        paddingHorizontal: 15,
        backgroundColor: "#fff",
        justifyContent: "space-between"
    },
    radioContent: {
        flexDirection: "row",
        alignItems: "center"
    },
    innerStyle: {
        height: 50
    }
});

export default class DemoTest extends Component {
    constructor(props) {
        super(props);
        this.state = {
            radioData: [
                { content: "商家評分", value: "1", disabled: false },
                { content: "個人評分", value: "2", disabled: false }
            ],
            selected: 2
        };
    }

    componentDidMount() {}

    render() {
        // console.log(RadioButton);
        return (
            <View>
                <View style={styles.content}>
                    <View>
                        <Text>測試Radio</Text>
                    </View>
                    <Radio
                        style={styles.radioContent}
                        dataOption={this.state.radioData}
                        options={{ value: "value", text: "content", disabled: "disabled" }}
                        selectedValue={this.state.selected}
                        disabledAll={false}
                        innerStyle={styles.innerStyle}
                        onChange={(item) => {
                            console.log(item);
                        }}
                        // txtColor="#ff552e"
                    />
                </View>
                {/* <RadioButton /> */}
            </View>
        );
    }
}

 

4、API

RadioButton

1、元件效果

2、程式碼演示

import React, { Component } from "react";
import { Alert, View, Text, StyleSheet, TouchableOpacity, Image, ScrollView } from "react-native";
import { Radio } from "@/rn-design";
const RadioButton = Radio.Button;
const styles = StyleSheet.create({
    content: {
        // flexDirection: "row",
        // alignItems: "center",
        paddingHorizontal: 15,
        backgroundColor: "#fff"
        // justifyContent: "space-between"
    },
    radioContent: {
        flexDirection: "row",
        alignItems: "center"
    },
    innerStyle: {
        height: 50
    }
});

export default class DemoTest extends Component {
    constructor(props) {
        super(props);
        this.state = {
            radioBtn: [
                { text: "不限", value: "0" },
                { text: "1萬公里內", value: "0_1" },
                { text: "3萬公里內", value: "0_3" },
                { text: "5萬公里內", value: "0_5" },
                { text: "8萬公里內", value: "0_8" }
            ],
            selected: "0_1"
        };
    }

    componentDidMount() {}

    render() {
        return (
            <View>
                <View style={styles.content}>
                    <View style={{ height: 45, justifyContent: "center" }}>
                        <Text>測試Radio</Text>
                    </View>
                    <RadioButton
                        dataOption={this.state.radioBtn}
                        options={{ value: "value", text: "text", disabled: "disabled" }}
                        selectedValue={this.state.selected}
                        onChange={(item) => {
                            console.log(item);
                        }}
                        size={[78, 37]}
                        // seledImg={require("./../img/filter/[email protected]")}
                    />
                </View>
            </View>
        );
    }
}

3、API

原始碼地址：
https://github.com/gongchenghuigch/rn-design/tree/master/radio