如何呈现这样的性别选择视图 - React Native

Question

我想知道如何呈现这样的性别选择视图...

单击男性后，我想渲染黄色图像（选中），单击女性后，我想将男性图像设为默认值，将女性图像设为黄色图像（选中）。

注意 - 我有 4 张单独的图片

例如 - Male_Checked / Male_Unchecked / Female_Checked / Female_Unchecked (PNG)

Answer 1

您可以编写一个函数，根据所选值返回图像，如下所示。

getImageForGender(gender) {

    if (gender == this.state.selectedGender) {
        return (gender == "male") ? Images.Male_Checked : Images.Female_Checked;
    }
    else {
        return (gender == "male") ? Images.Male_UnChecked : Images.Female_UnChecked;
    }
}

你可以使用这个函数来分配 ImageView 中的图像，例如：

<Image source={{getImageForGender("male")}} />
<Image source={{getImageForGender("female")}} />

Answer 2

我找到了答案！

{this.state.male_checked == 0 ? (
              <TouchableOpacity
                onPress={() => {
                  this.setState({male_checked: 1, female_checked: 0});
                }}
                style={styles.btn}>
                <Image style={styles.img} source={Images.BMI_MALE} />
                <Text>Male</Text>
              </TouchableOpacity>
            ) : (
              <TouchableOpacity
                onPress={() => {
                  this.setState({male_checked: 0});
                }}
                style={styles.btn}>
                <Image style={styles.img} source={Images.BMI_MALE_CHECKED} />
                <Text>Male</Text>
              </TouchableOpacity>
            )}

            {this.state.female_checked == 0 ? (
              <TouchableOpacity
                onPress={() => {
                  this.setState({female_checked: 1, male_checked: 0});
                }}
                style={styles.btn}>
                <Image style={styles.img} source={Images.BMI_FEMALE} />
                <Text>Female</Text>
              </TouchableOpacity>
            ) : (
              <TouchableOpacity
                onPress={() => {
                  this.setState({female_checked: 0});
                }}
                style={styles.btn}>
                <Image style={styles.img} source={Images.BMI_FEMALE_CHECKED} />
                <Text>Female</Text>
              </TouchableOpacity>
            )}