Question

我正在创建一个应用程序，当一个处于活动状态而另一个处于非活动状态时，我想创建两个按钮的问题

Answer 1

您可以使用switch，也可以使用按钮的更改颜色来显示活动和非活动状态。

使用状态变量的示例

window.addEventListener('click', function (evt) {
    if (evt.detail === 3) {
        console.log('triple click');
    }
});

Answer 2

您可以在此用例中使用react-native-elements中的ButtonGroup。

Answer 3

这是根据您的要求的基本示例。

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import RadioGroup from 'react-native-radio-buttons-group';

export default class App extends Component {
    state = {
        gender: [
            {
                label: 'Male',
                color: 'green',
            },
            {
                label: 'Female',
                color: 'green',
            }
        ],
    };

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

    render() {
        let selectedGender = this.state.gender.find(e => e.selected == true);
        selectedGender = selectedGender ? selectedGender.value : this.state.gender[0].label;
        return (
            <View style={styles.container}>
                <Text style={styles.header}>
                    Selected Gender - {selectedGender}
                </Text>
                <RadioGroup radioButtons={this.state.gender} onPress={this.onPress} />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    header: {
        fontSize: 18, 
        marginBottom: 50,
    },
});

使用React Native时如何创建性别选择按钮？

3 个答案: