ios - 如何在 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>
  );
}