Question

我将 redux-form 与 react-native 一起使用，并且由于某种原因，当表单状态从dirty更改为pristine时用户将第一个字符键入输入，键盘被隐藏，屏幕闪烁。这种情况发生在Android Nexus 5X设备上。

查看组件：

const TextField = ({placeholder: p, ...props}) =>
    <Field {...props}
           component={({input}) => {
               return <TextInput
                   value={input.value}
                   onChange={input.onChange}
                   secureTextEntry={props.type === 'password'}
                   placeholder={p}
               />
           }}/>

const Login = ({submit}) =>
    <View>
        <Text>You need to log in</Text>
        <TextField placeholder="Name"
                   name="name"/>
        <Button title="Login" onPress={submit}/>
    </View>

export default login(Login)

login是包含在

中的HOC

reduxForm({
            form: 'login',
            initialValues: {
                name: 'a',
            },
            onSubmit: vals => {
                console.log('submitting', vals)
            }
        })

react-native 中的哪种事件会造成这样的行为？

Answer 1

所以最后问题与 redux-form 无关，而是使用内联匿名组件

({input}) => {
               return <TextInput
                   value={input.value}
                   onChange={input.onChange}
                   secureTextEntry={props.type === 'password'}
                   placeholder={p}
               />
           }

这只是为了'原型'目的而被忽略了。

通常像const TextFieldComponent = ({input}) => ...一样声明组件解决了这个问题。

反应原生的脏/原始变化与redux-form导致键盘隐藏和闪烁

1 个答案: