javascript - 路由应该声明一个屏幕

Question

我正在尝试将导航(更准确地说是堆栈导航)与我的 React Native Redux 应用程序结合起来，并且在调试过程中遇到了此错误。根据我已经搜索过的内容，这是因为导航与 redux 工作模式并不真正兼容。所以我尝试解决我的问题，但仍然有同样的错误。这是我的代码:

登录.js

import React, { Component } from 'react';
import { View, ActivityIndicator, TouchableHighlight } from 'react-native';
import { getLogger, issueToText } from '../core/utils';
import styles from '../core/styles';
import { Card, Button, FormLabel, FormInput } from "react-native-elements";
import { connect } from 'react-redux'
import { loginAction } from '../actions/LoginActions'

class LoginComponent extends Component {
constructor(props) {
    super(props);
    this.login = this.login.bind(this)
}

render() {
    const { error, isLoading } = this.props;

    const inputFormProp = {
        username: '',
        password: ''
    };

    return (
        <View style={{ paddingVertical: 20 }}>
            <Card>
                <FormLabel>Email</FormLabel>
                <FormInput value={inputFormProp.username} onChangeText={(text) => inputFormProp.username = text} />
                <FormLabel>Password</FormLabel>
                <FormInput value={inputFormProp.password} onChangeText={(text) => inputFormProp.password = text} />

                <Button
                    buttonStyle={{ marginTop: 20 }}
                    backgroundColor="#03A9F4"
                    title="SIGN IN"
                    onPress={this.login(inputFormProp)}
                />
            </Card>
            <ActivityIndicator animating={this.props.isLoading} style={styles.activityIndicator} size="large" />
        </View>
    );
}


login(inputFormProp) {

    console.log(this.props)
    const { store } = this.props.screenProps.store;
    console.log(loginAction)
    const { dispatch } = this.props

    console.log(dispatch)
    dispatch(loginAction(inputFormProp))
        .then(() => {
            if (this.props.error === null && this.props.isLoading === false) {
                if (store.getState().auth.token) {
                    this.props.navigation.navigate('ProductList', { token: store.getState().auth.token });
                }
            }
        })
        .catch(error => {
        });
}


}

function mapStateToProps(state) {
const { error, isLoading } = state.auth

return {
    error,
    isLoading,
}
}

export default connect(mapStateToProps)(LoginComponent)

App.js

import React, { Component } from 'react';
import { createStore, applyMiddleware, combineReducers, compose } from 'redux';
import { createLogger } from 'redux-logger';
import thunk from 'redux-thunk';
import { authReducer } from "./src/reducers/LoginReducer";
import { productReducer } from "./src/product/service";
import { ProductList } from "./src/product/ProductList";
import { LoginComponent } from "./src/components/Login";
import { Provider, connect } from "react-redux";
import { StackNavigator, addNavigationHelpers } from "react-navigation";
import Routes from "./src/core/routes";


const AppNavigator = StackNavigator(Routes, {
  navigationOptions: {
    title: ({ state }) => {
      if (state.params) {
        return `${state.params.title}`;
      }
    }
  }
    });

const navReducer = (state, action) => {
  const newState = AppNavigator.router.getStateForAction(action, state);
  return newState || state;
    };

@connect(state => ({
  nav: state.nav
    }))
class AppWithNavigationState extends Component {
  render() {
    return (
      <AppNavigator
        navigation={addNavigationHelpers({
          dispatch: this.props.dispatch,
          state: this.props.nav
        })}
      />
    );
  }
}

const initialState = {
  auth: { isLoading: false, error: null },
    };

const rootReducer = combineReducers({ product: productReducer, auth: authReducer, nav: navReducer });

let store = createStore(rootReducer, initialState, 
compose(applyMiddleware(thunk, createLogger())));

export default function App() {
  return (
    <Provider store={store}>
      <AppWithNavigationState />
    </Provider>
  );
}

路由.js

import { ProductList } from "../product/ProductList";
import { LoginComponent } from "../components/Login";

const Routes = {
    Login: { screen: LoginComponent },
    ProductList: { screen: ProductList }
};

export default Routes;

这是我的错误:路由登录应该声明一个屏幕。

我的代码做错了什么？谢谢。

Answer 1

我修正了错误。这是因为我在routes.js文件中的LoginComponent {}之间添加了:

import { LoginComponent } from "../components/Login";