反应原生中使用redux表单单选按钮的示例

Question

有没有一个很好的例子在反应原生中使用redux表单单选按钮？我一直试图找到一个教程或指令来使用它们，但我找不到一个好的。

如果有人在反应原生中使用了redux表单单选按钮，请告诉我如何操作。对我来说这将是一个很大的帮助。

谢谢，

Answer 1

更新了实际无线电设备的解决方案

用法：

<Field radios={[{label:'Green',value:'g'},{label:'Red',value:'r'},{label:'Blue',value:'b'}]} setLabel="Pick a color" component={RadioSet} />

RadioSet组件的代码：

import React, { PureComponent } from 'react'
import { TouchableHighlight, View, Text } from 'react-native'

class RadioSet extends PureComponet {
    render() {
        const { radios, input:{ value, onChange } } = this.props;
        return (
            <View>
                { radios.map( radio => <Radio key={radio.label} {...radio} onChange={onChange} checked={radio.value === value} /> }
            </View>
        )
    }
}

class Radio extends PureComponent {
    render() {
        const { checked, label } = this.props;
        <TouchableHighlight onPress={this.handlePress}>
            <View>
                <View style={checked ? styles.circleFilled : styles.circle} />
                <View>
                    <Text>{label}</Text>
                </View>
            </View>
        </TouchableHighlight>
    }

    handlePress = () => this.props.onChange(this.props.value)
}

export default RadioSet

旧解决方案

它应该类似于复选框，我这样实现：

/* @flow */

import React, { PureComponent } from "react";
import { TouchableHighlight, View } from "react-native";

import Icon from "../../Icon";
import Text from "../../Text";

import styles from "./style.css";

class Checkbox extends PureComponent {
  handlePress = () => {
    const { input: { onChange, value } } = this.props;
    onChange(!value);
  }
  render() {
    const { label, input: { value } } = this.props;

    return (
      <TouchableHighlight style={styles.checkboxTouchable} onPress={this.handlePress} underlayColor="rgb(200, 200, 200)" activeOpacity={0.7}>
        <View style={styles.checkboxWrap}>
          <View style={styles.checkboxSquareWrap}>
            <View style={value ? styles.checkboxSquare : styles.checkboxSquareUnchecked} />
            {!!value && <View style={styles.checkboxCheckWrap}>
              <Icon check style={styles.checkboxCheckIcon} />
            </View>}
          </View>
          <Text style={styles.checkboxLabel}>{label}</Text>
        </View>
      </TouchableHighlight>
    )
  }
}

export default Checkbox;

我这样使用它：

<Field label="Send activation e-mail to customer" name="send_customer_email" component={Checkbox} />