Question

我开始使用react native和redux格式。

我想在填写我的reduxform字段时更改keyboardType，但是keyboardType道具不起作用：

  <Field
      name="email"
      component={textAccount}
      fieldName="Email"
      keyboardType="email-address"
  />

这是textAccount代码：

import React from 'react';
import { View } from 'react-native';
import { Input } from 'react-native-elements';

function textAccount(props) {
  const { input, fieldName } = props;
  return (
    <View>
      <Input
        onChangeText={input.onChange}
        value={input.value}
        placeholder={fieldName}
      />
    </View>
  );
}

export default textAccount;

我假设它特定于反应原生TextInput元素according to the documentation。

在这种情况下，我希望能够显示最准确的键盘类型，具体取决于我需要的字段（＆＃34;电子邮件地址＆＃34;在我的示例中）。< / p>

你知道是否有任何等效的道具可用于＆＃34; Field＆＃34;？

非常感谢！

Answer 1

你可以这样做：

const renderField = ({ label, requiredMarker, keyboardType, placeholder, input: { onChange, ...restInput }}) => {
    return (
    <View>
        <Text style={{fontSize: 16, fontWeight: '600'}}>{label}<Text style={{color: '#dc3545'}}>{requiredMarker}</Text></Text>
        <TextInput style={{ padding: 5 }} keyboardType={keyboardType} onChangeText={onChange} {...restInput} placeholder={placeholder} autoCapitalize='none'>
        </TextInput>
    </View>);
};

const UserComponent = props => {
    return (
        <View style={{ flex: 1, flexDirection: 'column', margin: 20, justifyContent: 'flex-start', }}>
            <Field name="email" keyboardType="email-address" label="Email: " requiredMarker="*" placeholder="Enter email"
                component={renderField}
            />
        </View>
    );
}

希望它会有所帮助!!

Answer 2

尝试使用type

 type="email"

更新：

您需要在Input而不是Field

中进行更改

<Input
     keyboardType="email-address"
    ... />

Answer 3

你应该把它放到Input组件：

  <Input
    onChangeText={input.onChange}
    value={input.value}
    placeholder={fieldName}
    keyboardType="email-address"
  />

此外，查看redux-form代码，似乎所有未知参数都传递给component：

function textAccount(props) {
  const { input, fieldName, ...rest } = props;
  return (
    <View>
      <Input
        onChangeText={input.onChange}
        value={input.value}
        placeholder={fieldName}
        {...rest}
      />
    </View>
  );
}

然后您应该只能在keyboardType上设置Field。

是否有一个与redux-form的keyboardType道具的等价物？

3 个答案: