Question

我在响应本机react-native-radio-buttons-group中将此包用于单选按钮，我也react-native-btr也尝试过此包。我认为两者是相同的。最初，选择第一个按钮。我的应用程序中有一个条件，除非用户选择，否则不应选择任何条件。我该怎么办？

import RadioGroup from 'react-native-radio-buttons-group';

export default class App extends Component {
    state = {
        data: [
            {
                label: 'Default value is same as label',
            },
            {
                label: 'Value is different',
                value: "I'm not same as label",
            },
            {
                label: 'Color',
                color: 'green',
            },
            {
                disabled: true,
                label: 'Disabled',
            },
            {
                label: 'Size',
                size: 32,
            },
        ],
    };

    onPress = data => this.setState({ data });

    render() {
        let selectedButton = this.state.data.find(e => e.selected == true);
        selectedButton = selectedButton ? selectedButton.value : this.state.data[0].label;
        return (
            <View style={styles.container}>
                <Text style={styles.valueText}>
                    Value = {selectedButton}
                </Text>
                <RadioGroup radioButtons={this.state.data} onPress={this.onPress} />
            </View>
        );
    }
}

Answer 1

尝试通过使用反应本机Flexi单选按钮来实现这一目标，如下所示。您也可以参考此链接https://www.npmjs.com/package/react-native-flexi-radio-button。希望对您有所帮助。

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';

import {RadioGroup, RadioButton} from 'react-native-flexi-radio-button'

class App extends Component{

    constructor(){
        super()
        this.state = {
            text: ''
        }
        this.onSelect = this.onSelect.bind(this)
    }

    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>
        )
    }
}

let styles = StyleSheet.create({
    container: {
        marginTop: 40,
        padding: 20
    },
    text: {
        padding: 10,
        fontSize: 14,
    },
})

module.exports = App

最初不应在单选按钮中选择任何按钮

1 个答案: