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

Question

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

原文由 vasavi 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Lane Rettig 发布，翻译遵循 CC BY-SA 3.0 许可协议