React Native 中的 React Redux 表单复选框和下拉字段？

Question

我正在尝试使用 React Redux Form 在 React Native 中构建一个表单，但我可以使用 <TextInput> 作为电子邮件和密码，但现在我想使用一些复选框和下拉菜单。他们的 documentationm 不提供 React Native 指南或任何示例，因为他们只对任何输入使用 <Input> 标记，但我如何在 React Native 中使用它？

这是我用于电子邮件的字段渲染：

const renderField = ({ label, type, keyboardType, name, meta: { touched, error }, input: { onChange, ...restInput } }) => {
  return (
    <View style={{ flexDirection: 'column', height: 70, alignItems: 'flex-start' }}>
      <View style={{ flexDirection: 'row', height: 30, alignItems: 'center', borderColor: 'black', borderBottomWidth: 1, }}>
        <FontAwesome name='email-outline' size={18} color='#cccccc' style={{ paddingLeft: 2 }} />
        <TextInput style={{ height: 37, width: 280, paddingLeft: 10, fontSize: 20 }}
          keyboardType={keyboardType} onChangeText={onChange} {...restInput}
          placeholder={label}
        >
        </TextInput>
      </View>
      {touched && ((error && <Text style={{ color: 'red', }}>{error}</Text>))}
    </View>);
}; 

<Field keyboardType='email-address' type='email' label='Email' component={renderField} name='email' />

Answer 1

问题是什么？

只需创建一个 checkboxField 组件，您将在需要的地方使用它来代替 renderField。只需使用 props 中的 onChange 函数来设置 value 和值作为值本身。

举个例子更容易理解：

const renderField = ({ input: { onChange, value } }) => {
   return (
      <View>
         <Switch 
           onValueChange={(value) => onChange(value)} 
           value={value} 
         /> 
      </View>
   );
};

React Native 中的 React Redux 表单复选框和下拉字段？

React Redux Form checkbox and dropdown field in React Native?

react-native

redux-form