Получить функцию подключения для работы на экране входа реагировать нативное приложение с реагировать навигацию + избыточный - PullRequest
Новая
       26

Получить функцию подключения для работы на экране входа реагировать нативное приложение с реагировать навигацию + избыточный

0 голосов
/ 18 сентября 2018

В настоящее время я впервые работаю с реагировать на родной и избыточный, в моем поиске я обнаружил реагирующую навигацию для навигации между моим экраном.

Я поделюсь своим реальным кодом, но мой вопрос, как яМожет ли функция подключения работать на моем экране входа в систему?

app.js: 

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import  { createStore, applyMiddleware} from 'redux';
import { Provider, connect} from 'react-redux';
import axios from 'axios';
import axiosMiddleware from 'redux-axios-middleware';
import Navigation from './navigation.js';
import reducer from './reducer.js';

const httpClient = axios.create({
    baseURL: '',
    responseType: 'json'
});

const store = createStore(reducer, applyMiddleware(axiosMiddleware(client)));

export default class App extends React.Component {
  render() {
    return (
        <Provider store={store}>
          <Navigation />
        </Provider>
    );
  }
}

navigation.js: 

import { createStackNavigator } from 'react-navigation';
import * as React from 'react';
import MapScreen from './pageComponents/MapScreen.js'
import LoginScreen from './pageComponents/LoginScreen.js'
import MenuNavButton from "./components/MenuNavButton";


export default createStackNavigator({
        Map: MapScreen,
        Login: LoginScreen
    },
    {
        initialRouteName: 'Map',
        navigationOptions: {
            headerRight: <MenuNavButton toScreen="Login" />
        }
    });

LoginScreen: 

import React from 'react';
import { StyleSheet, Text, TextInput, Button, View, AsyncStorage, ActivityIndicator } from 'react-native';
import { connect } from 'react-redux';
import { postLogin } from '../actionCreators/loginScreenAction.js';
/*
<View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <Text>Changes you make will automatically reload.</Text>
        <Text>Shake your phone to open the developer menu.</Text>
      </View>
 */


class LoginScreen extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            username: '',
            password: '',
            isLoading: false
        };
    }

    handleChange = fieldName => event => {
        this.setState({
            [fieldName]: event.target.value,
        });
    };

    signInAsync = async () => {
        await this.props.postLogin(this.state.username, this.state.password)
            .then((response) => console.log(response));
        //this.setState(() => {
        //    return{ isLoading: true }
        //});
        //await AsyncStorage.setItem('userToken', 'abc');
        //this.props.navigation.navigate('Carte');
    };

    render() {
        console.log(this.state);
        let spinner = (this.state.isLoading) ? (
            <ActivityIndicator
                animating={true}
                size="large" color="#0000ff"
            />
        ) : (
            null
        );
        return (<View style={styles.container}>
            <Text>userName Guss is god</Text>
            <TextInput
                style={{height: 40, width: 350}}
                onChange={this.handleChange('username')}
                value={this.state.userName}
            />
            <Text>password</Text>
            <TextInput
                style={{height: 40, width: 350}}
                onChange={this.handleChange('password')}
                value={this.state.password}
            />
            <Button title="login" onPress={this.signInAsync} />
            {spinner}
        </View>);
    }
}
//<ActivityIndicator size="large" color="#0000ff" animating={this.state.isLoading}/>
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

const mapStateToProps = state => {
    return {
        isLoading: state.loading
    }
};

const mapDispatchToProps = {
    postLogin
};

export default connect(mapStateToProps, mapDispatchToProps)(LoginScreen);

reducer.js 

export const POST_LOGIN = "evenMap/login/POST";
export const POST_LOGIN_SUCCESS = "evenMap/login/POST_SUCCESS";
export const POST_LOGIN_FAIL = "evenMap/login/POST_FAIL";

export default function reducer(state = { event: []}, action) {
    switch (action.type) {
        case POST_LOGIN:
            return { ...state, loading: true};
        case POST_LOGIN_SUCCESS:
            return { ...state, loading: false};
        case POST_LOGIN_FAIL:
            return { ...state, loading:false};
        default:
            return state;
    }
}

loginScreenAction: 

import {POST_LOGIN} from "../reducer.js";

export function postLogin(email, password) {
    return {
        type: POST_LOGIN,
        payload: {
            request: {
                method: 'POST',
                url: '/login',
                data: {
                    email: email,
                    password: password
                }
            }
        }
    };
}

, когда я пытаюсь получить доступ к своему экрану входа в систему, я получаю эту ошибку: 

Invariant Violation: Invariant Violation: Could not find "store" in either the context or props of "Connect(LoginScreen)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(LoginScreen)".

This error is located at:
    in Connect(LoginScreen) (at SceneView.js:9)
    in SceneView (at StackViewLayout.js:476)
    in RCTView (at View.js:60)
    in View (at StackViewLayout.js:475)
    in RCTView (at View.js:60)
    in View (at StackViewLayout.js:474)
    in RCTView (at View.js:60)
    in View (at createAnimatedComponent.js:154)
    in AnimatedComponent (at screens.js:47)
    in Screen (at StackViewCard.js:41)
    in Card (at createPointerEventsContainer.js:26)
    in Container (at StackViewLayout.js:506)
    in RCTView (at View.js:60)
    in View (at screens.js:72)
    in ScreenContainer (at StackViewLayout.js:399)
    in RCTView (at View.js:60)
    in View (at StackViewLayout.js:398)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.js:40)
    in RCTView (at View.js:60)
    in View (at Transitioner.js:141)
    in Transitioner (at StackView.js:19)
    in StackView (at createNavigator.js:59)
    in Navigator (at createKeyboardAwareNavigator.js:11)
    in KeyboardAwareNavigator (at createNavigationContainer.js:376)
    in NavigationContainer (at App.js:12)
    in App (at registerRootComponent.js:35)
    in RootErrorBoundary (at registerRootComponent.js:34)
    in ExpoRootComponent (at renderApplication.js:33)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:32)

This error is located at:
    in NavigationContainer (at App.js:12)
    in App (at registerRootComponent.js:35)
    in RootErrorBoundary (at registerRootComponent.js:34)
    in ExpoRootComponent (at renderApplication.js:33)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:32)
- node_modules/react-redux/lib/components/connectAdvanced.js:116:24 in Connect(LoginScreen)
- node_modules/react-native/Libraries/Renderer/ReactNativeRenderer-dev.js:6569:28 in constructClassInstance
- ... 17 more stack frames from framework internals

что можетЯ делаю, чтобы решить это, или есть идеи, чтобы решить эту проблему?

...