mh-rn-component/commonjs/RadioGroup/index.js.flow

import React, { useState } from 'react'
import { View, Text, TextInput, ScrollView, StyleSheet, StyleProp, ViewStyle } from 'react-native';
import Radio from '../Checkbox'
import renderNode from '../helpers/renderNode'
type Options = {
  label: string,
  value: string
}
type Props = {
  checked: string,
  onChange: (value: string) => void,
  children?: any,
  options?: Options[],
  name?: string,
  disabled?: boolean,
  activeIcon?: React.ReactElement<{}>,
  inactiveIcon?: React.ReactElement<{}>,
  rightIcon?: boolean,
  checkedColor?: string,
  style?: StyleProp<ViewStyle>;
  iconSize?:number
}
const RadioGroup = ({ checked, onChange, options, children, ...rest }: Props) => {
  const [_value, set_value] = useState(checked)
  const checkRadio = (value: string) => {
    // if (_value === value) {
    //   set_value('')
    //   onChange('')
    //   return
    // }
    set_value(value)
    onChange(value)
  }
  return (
    <View>
      <View style={rest.style}>
        {options && options.map((item, index) => {
          return (
            <Radio onPress={checkRadio} checked={item.value === _value} key={index} {...item} {...rest}></Radio>
          )
        })}
      </View>
      <View style={rest.style}>
        {/* @ts-ignore 忽略本行class组件的ts报错 */}
        {children && (
          React.Children.toArray(children).map((child: any) => {
            return React.cloneElement(child as React.ReactElement<any>, {
              onPress: checkRadio,
              checked: child?.props.value === _value,
              name: rest.name,
              disabled: child?.props.disabled || rest.disabled,
              activeIcon: child?.props.activeIcon || rest.activeIcon,
              inactiveIcon: child?.props.inactiveIcon || rest.inactiveIcon,
              rightIcon: child?.props.rightIcon || rest.rightIcon,
              checkedColor: child?.props.checkedColor || rest.checkedColor,
              children: child?.props.children,
              iconSize:child?.props.iconSize || rest.iconSize,
            })
          })
        )
        }
      </View>

    </View>

  )
}

export default RadioGroup