使用本机反应时如何创建性别选择按钮？答案

【问题标题】：How would I create gender selected button when using react native?使用本机反应时如何创建性别选择按钮？
【发布时间】：2019-06-14 11:58:36
【问题描述】：

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

【问题讨论】：

“性别”在哪里发挥作用？
我不知道该怎么做
您有任何代码可以显示您尝试过的内容吗？
我设计了当用户选择男性时，其他人处于非活动状态
How to implement radio button in React Native的可能重复

标签： react-native

【解决方案1】：

对于此用例，您可以使用 ButtonGroup 或 react-native-elements。

【讨论】：

【解决方案2】：

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

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

【讨论】：

当我使用 RadioGroup 时，我的应用程序变慢了移动下一个屏幕需要 1 到 1.5 mnt

【解决方案3】：

您可以使用switch 或者您可以使用更改按钮颜色来显示活动和非活动。

使用状态变量的例子

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

class Test extends Component {
    state = {
        gender: 'male',
        maleButtonColor: '#841584',
        femaleButtonColor: '#C0C0C0'
    }


    onSubmitEmailRP() {
        this.password.focus();
    }

    render() {
        return (
            <View>
                <Button
                    onPress={() => {
                        this.setState({
                            gender: 'male',
                            maleButtonColor: '#841584',
                            femaleButtonColor: '#C0C0C0'
                        })
                    }}
                    title="Male"
                    color="#841584"
                />
                <Button
                    onPress={() => {
                        this.setState({
                            gender: 'female',
                            maleButtonColor: '#C0C0C0',
                            femaleButtonColor: '#841584'
                        })
                    }}
                    title="Female"
                    color="#841584"
                />
            </View>);
    }
}

export default Test;

【讨论】：

但是如何控制两个相互依赖的按钮
谢谢，我正在使用 react-native-segment-control 按钮