反应原生导航无法在“Connect（facebookLogin）

Question

的上下文或道具中找到”商店“我正在建立反应与Facebook登录本机应用程序身份验证 我使用堆栈导航器，我想添加REDX我的应用程序。 我只是单独的我的文件组件和当我使用堆栈导航与终极版我得到这个错误

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设立终极版代替，所以它看起来是这样的：在index.android.js

// 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);