javascript - React Native Navigation with Redux - undefined 不是一个函数

Question

我尝试设置 react-native-navigation 但我遇到了问题

我的代码如下

app.js

import React from 'react';

import { Provider } from 'react-redux'
import { Navigation } from 'react-native-navigation';
import registerScreens from './screens'

import configureStore from './src/store/configureStore';

export default class App extends React.Component {

  constructor(props) {
    super(props)

    const store = configureStore()

    registerScreens(store, Provider);

    startApp()
  }

  startApp() {
    Navigation.startSingleScreenApp({
      screen: {
        screen: 'ior.Login', 
        title: 'Welcome', 
        navigatorStyle: {}, 
        navigatorButtons: {} 
      },
      drawer: {} ,
      passProps: {}, 
      animationType: 'slide-down' 
    });
  }
}

configureStore.js

import ReduxThunk from 'redux-thunk'
import reducers from '../reducers'
import { createStore, applyMiddleware } from 'redux';

export default function configureStore() {
    return createStore(
        reducers,
        {},
        applyMiddleware(ReduxThunk)
    );
}

screens.js

import { Navigation } from 'react-native-navigation';
import Login from './src/components/Login'

export function registerScreens(store, Provider) {
    Navigation.registerComponent('ior.Login', () => Login, store, Provider);
}

登录.js

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { StyleSheet, Text, View, TextInput, Button } from 'react-native';
import { loginChanged, passwordChanged, loginUser } from '../actions';

class Login extends React.Component {
    onLoginChange(text) {
        this.props.loginChanged(text)
    }

    onPasswordChange(text) {
        this.props.passwordChanged(text)
    }

    onPress() {
        this.props.loginUser(this.props.email, this.props.password)
    }

    render() {
        return (
            <View style={styles.container}>
                <TextInput
                style={styles.textField}
                onChangeText={this.onLoginChange.bind(this)}
                value={this.props.email}
                placeholder={"Логин"}
                 />
                <TextInput
                style={styles.textField}
                onChangeText={this.onPasswordChange.bind(this)}
                value={this.props.password}
                placeholder={"Пароль"}
                />
                <Button onPress={this.onPress.bind(this)} title={"Войти"}/>
          </View>
        )
    }
}

const styles = StyleSheet.create({
    textField: {
      flex: 1,
      width: '80%',
      height: 100,
    },
    container: {
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
      flex: 0.3,
      marginTop: 210
    },
    button: {
      width: '100%'
    }
  });

const mapStateToProps = state => {
    return {
        email: state.login.email,
        password: state.login.password
    }
}

export default connect(mapStateToProps, { loginChanged, passwordChanged, loginUser })(Login)

actions/index.js

从'axios'导入axios

export const loginChanged = (text) => {
    return {
        type: 'LOGIN_CHANGED',
        payload: text
    }
}

export const passwordChanged = (text) => {
    return {
        type: 'PASSWORD_CHANGED',
        payload: text
    }
}

export const loginUser = (email, password) => {
    const creds = { mail: email, password: password }
    console.log(creds)
    return (dispact) => {
        axios.post('http://192.168.1.10:3000/users/auth', creds)
        .then(response => console.log(response))
        .catch( err => console.log(err))
     }
}

我做错了什么？

Answer 1

问题是 registerScreens 导出为命名导出，但您将其导入为默认导出。

import registerScreens from './screens'
//     ^ this is how you import a default export

您应该将 export default 添加到 registerScreens

export default function registerScreens(store, Provider) {
    // ...
}

或者像命名导出一样导入它:

import { registerScreens } from './screens'

---

此外，您正在调用一个类方法 startApp()，就好像它是一个普通函数一样，但它是您类中的一个方法。

export default class App extends React.Component {
  constructor(props) {
    // ...
    startApp()
    // ^calling like a simple function
  }
}

你必须从上下文中调用它:

export default class App extends React.Component {
  constructor(props) {
    // ...
    this.startApp()
    // ^calling it like a method
  }
}