Question

我在我的寄存器组件中使用redux表单并尝试将其传递给redux-store。

app.js

import React, { Component } from 'react';
import WelcomePage from './components/welcomePage';
import Register from './components/register';
import { StackNavigator } from 'react-navigation'
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

    import { Provider,connect } from 'react-redux';
    import  store  from './store/store';
    const instructions = Platform.select({
      ios: 'Press Cmd+R to reload,\n' +
        'Cmd+D or shake for dev menu',
      android: 'Double tap R on your keyboard to reload,\n' +
        'Shake or press menu button for dev menu',
    });

    type Props = {};


    const mapStateToProps=state => {
        return state;
    }
    const mapDispatchToProps=dispatch => {
        return {}
    }

    const handleSubmit=values=> {
      console.log(values);
    }
    const Navigationapp=StackNavigator({welcome:{screen:WelcomePage},register:{screen:props=><Register {...props} handleSubmit={handleSubmit} />}});
    const Container = connect(mapStateToProps,mapDispatchToProps)(Navigationapp);
    export default class App extends Component{
        render(){
            return (<Provider store={store}>
                         <Container/>
                </Provider>)
        }
    };

register.js

import React,{ Component } from 'react';
import { Field,reduxForm } from 'redux-form';
import { Text,Input } from 'react-native-elements';
import { View,Button } from 'react-native';

const renderField=({label,keyboardType,name}) => {
    return(
            <View style={{flexDirection:'row',height:50,alignItems:'center' }}>
                <Text>
                    <h4>{label}</h4>
                </Text>
                <Input />
            </View>
    )
}
const RegisterForm=props => {
    const {handleSubmit}=props;
    return(
            <View style={{flex:1,flexDirection:'column',margin:40,justifyContent:'flex-start'}}>

                <Field label="Username" component={renderField} name="username" />
                <Button title='SUBMIT' onPress={handleSubmit} />

            </View>
    )
}
const Register=reduxForm({
    form:'register',
})(RegisterForm);
export default Register;

store.js

import { createStore,combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
const rootReducer=combineReducers({
    form:formReducer
})
const store=createStore(rootReducer);
export default store;

当我导航到寄存器组件时，它显示以下错误。

我仍然无法确认问题是在我的注册组件中还是在我的app.js.Please帮我解决这个问题。

Answer 1

Input组件中不存在react-native-elements组件，只需将其从导入语句和renderField中删除：

import React,{ Component } from 'react';
import { Field,reduxForm } from 'redux-form';
import { Text } from 'react-native-elements'; // Removed 'Input' import
import { View,Button } from 'react-native';

const renderField=({label,keyboardType,name}) => {
    return(
            <View style={{flexDirection:'row',height:50,alignItems:'center' }}>
                <Text>
                    <h4>{label}</h4>
                </Text> // Removed <Input />
            </View>
    )
}

修改：您可能希望使用<FormInput />代替

react-native中的'不变违规：元素类型无效'问题

1 个答案: