如何在React Native中实现单选按钮 [英] How to implement radio button in React Native

问题描述

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

I am converting React code to React Native. So I need to implement radio buttons.

推荐答案

仅使用准系统RN即可非常轻松地模拟单选按钮.这是我使用的一个简单实现.随意调整大小，颜色等.看起来像这样(具有不同的色调和一些文本).在顶部添加TouchableOpacity，将其变成可以执行某些操作的按钮.

You can mimic a radio button really easily using just barebones RN. Here's one simple implementation which I use. Tweak size, colors etc. as you like. It looks like this (with a different tint, and some text). Add TouchableOpacity on top to turn it into a button that does something.

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

这篇关于如何在React Native中实现单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！