如何在React Native中实现单选按钮

Question

我正在将React代码转换为React Native.所以我需要实现单选按钮.

Answer 1

您只需使用准系统RN即可轻松模仿单选按钮.这是我使用的一个简单实现.根据需要调整尺寸,颜色等.它看起来像这样(带有不同的色调和一些文字).添加TouchableOpacity到顶部将其转换为执行某些操作的按钮.

function RadioButton(props) {
  return (
      <View style={[{
        height: 24,
        width: 24,
        borderRadius: 12,
        borderWidth: 2,
        borderColor: '#000',
        alignItems: 'center',
        justifyContent: 'center',
      }, props.style]}>
        {
          props.selected ?
            <View style={{
              height: 12,
              width: 12,
              borderRadius: 6,
              backgroundColor: '#000',
            }}/>
            : null
        }
      </View>
  );
}

Answer 2

这是创建radioButtons的另一种方法（Source，感谢php step by step通道）

方法1

constructor(props) {
    super(props);
    this.state = {
        radioBtnsData: ['Item1', 'Item2', 'Item3'],
        checked: 0
    }
}

import { View, TextInput, TouchableOpacity } from 'react-native';

{this.state.radioBtnsData.map((data, key) => {
    return (
        <View key={key}>
            {this.state.checked == key ?
                <TouchableOpacity style={styles.btn}>
                    <Image style={styles.img} source={require("./img/rb_selected.png")}/>
                    <Text>{data}</Text>
                </TouchableOpacity>
                :
                <TouchableOpacity onPress={()=>{this.setState({checked: key})}} style={styles.btn}>
                    <Image style={styles.img} source={require("./img/rb_unselected.png")} />
                    <Text>{data}</Text>
                </TouchableOpacity>
            }
        </View>
    )
})}

const styles = StyleSheet.create({
    img:{
        height:20,
        width: 20
    },
    btn:{
        flexDirection: 'row'
    }
});

将图像放在img文件夹中的下方

方法2

为新开发者精心设计的LaneRettig ex

感谢Lane Rettig

constructor(props){
    super(props);
    this.state = {
      radioSelected: 1
    }
  }


  radioClick(id) {
    this.setState({
      radioSelected: id
    })
  }

  render() {

    const products = [{
      id: 1
    },
    {
      id: 2
    },
    {
      id: 3
    }];

    return (
      products.map((val) => {
        return (
          <TouchableOpacity key={val.id} onPress={this.radioClick.bind(this, val.id)}>
            <View style={{
              height: 24,
              width: 24,
              borderRadius: 12,
              borderWidth: 2,
              borderColor: '#000',
              alignItems: 'center',
              justifyContent: 'center',
            }}>
              {
                val.id == this.state.radioSelected ?
                  <View style={{
                    height: 12,
                    width: 12,
                    borderRadius: 6,
                    backgroundColor: '#000',
                  }} />
                  : null
              }
            </View>
          </TouchableOpacity>
        )
      })
    );
  }

Answer 3

有一个名为react-native-radio-buttons的react-native组件可以完成你需要的一些工作:

Answer 4

这是我使用功能组件的单选按钮解决方案。

注意- 我已将图像用于选中和未选中的单选图标

import React, {useState} from 'react';
import {View, Text, StyleSheet, TouchableOpacity, Image} from 'react-native';

const Radio = () => {
  const [checked, setChecked] = useState(0);
  var gender = ['Male', 'Female'];
  return (
    <View>
      <View style={styles.btn}>
        {gender.map((gender, key) => {
          return (
            <View key={gender}>
              {checked == key ? (
                <TouchableOpacity style={styles.btn}>
                  <Image
                    style={styles.img}
                    source={require('../images/radio_Checked.jpg')}
                  />
                  <Text>{gender}</Text>
                </TouchableOpacity>
              ) : (
                <TouchableOpacity
                  onPress={() => {
                    setChecked(key);
                  }}
                  style={styles.btn}>
                  <Image
                    style={styles.img}
                    source={require('../images/radio_Unchecked.png')}
                  />
                  <Text>{gender}</Text>
                </TouchableOpacity>
              )}
            </View>
          );
        })}
      </View>
      {/* <Text>{gender[checked]}</Text> */}
    </View>
  );
};

const styles = StyleSheet.create({
  radio: {
    flexDirection: 'row',
  },
  img: {
    height: 20,
    width: 20,
    marginHorizontal: 5,
  },
  btn: {
    flexDirection: 'row',
    alignItems: 'center',
  },
});

export default Radio;