Question

我正在使用facebook登录进行本机应用认证。我正在使用堆栈导航器，我想将redux添加到我的应用程序中。我只是将我的文件分离到组件，当我使用带有redux的堆栈导航时，我得到了这个错误

Could not find "store" in either the context or props of 

"Connect(facebookLogin)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(facebookLogin)".

index.android.js

import React, { Component } from 'react';
import { Text, View, StyleSheet, TouchableOpacity, AppRegistry, Image } from 'react-native';
import facebookLogin from './src/components/FacebookLogin';
import Home from './src/components/Home';

import {
  StackNavigator,
} from 'react-navigation';


const App = StackNavigator({
  Home: { screen: facebookLogin },
  HomePage: {screen:Home},

})


AppRegistry.registerComponent('facebookLogin', () => App);

FacebookLogin.js

    /**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import { Text, View, StyleSheet, TouchableOpacity, AppRegistry, Image } from 'react-native';
import FBSDK, { LoginManager, GraphRequest, GraphRequestManager } from 'react-native-fbsdk';
import Icon from 'react-native-vector-icons/FontAwesome';

// redux
import { Provider } from 'react-redux';
import { connect } from 'react-redux';
import { createStore }  from 'redux';
import reducers from '../reducers/ProfileReducers';



const store = createStore(reducers, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

class facebookLogin extends Component {
  constructor(props) {
    super(props);
    this.state = {
      result: null
    }

  }
  _fbAuth() {
    const { navigate } = this.props.navigation;

    LoginManager.logInWithReadPermissions(['public_profile','user_birthday']).then((result) => {
      if (result.isCancelled) {
        console.log('Login was canclled');
      }
      else {
        console.log(result);
        const infoRequest = new GraphRequest(
          '/me?fields=id,name,picture.width(800).height(800),gender,birthday,first_name,last_name',
          null,
          (error, result) => {
            if (error) {
              alert('Error fetching data: ' + error.toString());
            } else {
              console.log(result);
              this.setState({ result });
              navigate('HomePage');
            }
          }
        );
        // Start the graph request.
        new GraphRequestManager().addRequest(infoRequest).start();


      }

    }, function (error) {
      console.log('An error occured:' + error);

    })
  }

  getProfileData() {
    const { ImageStyle } = styles;
    if (this.state.result) {
      return (
        <View>
          {this.state.result.picture ? <Image style={ImageStyle} source={{ uri: this.state.result.picture.data.url }}></Image> : null}

          <Text> first name: {this.state.result.first_name} </Text>
          <Text> Last name: {this.state.result.last_name} </Text>
          <Text> Gender  {this.state.result.gender} </Text>
        </View>
      )
    }
    return null;
  }
  render() {
    return (

    <Provider store = {store}>
      <View style={styles.container}>
        <Icon.Button name="facebook" backgroundColor="#3b5998"  onPress={() => { this._fbAuth() }}>
        <Text style={{fontFamily: 'Arial', fontSize: 15, color:'white'}}>Login with Facebook</Text>
      </Icon.Button>        
        {this.getProfileData()}
      </View>
      </Provider>

    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  ImageStyle:{
    borderRadius:80,
    width:100,
    height:100

  }
});

const mapStateToProps = (state) => {
  return 
    { profile: state.profile};

}

export default connect(mapStateToProps)(facebookLogin);

当它只是index.android.js中的一个组件时，它没有任何错误，但是当我使用堆栈导航将它分离到某些组件时，我得到了这个错误。

我的profileReducers

var profile = {
    name :'',
    email:'',
    photo:''
}

const initialState = {
    profile,

};

export default (state = initialState, action) => {
    console.log("state");
    switch (action.type) {
        case 'INSERT_PROFILE_DETAILS':
            return {
                profile: action.payload
            }
        case 'GET_PROFILE_DETAILS': {
            return state;
        }
        default:
            return state;
    }
}

Answer 1

尝试在index.android.js中设置redux，所以它看起来像这样：

// Set up redux store above

const Navigator = StackNavigator({
  Home: { screen: facebookLogin },
  HomePage: { screen: Home },
});

const App = () => (
    <Provider store={store}>
        <Navigator />
    </Provider>
);

AppRegistry.registerComponent('facebookLogin', () => App);

反应原生导航无法找到＆＃34; store＆＃34;在＆＃34; Connect（facebookLogin）的上下文或道具中

1 个答案: