2017-06-10 7 views
0

NavigationActionsでナビゲートしようとしていますが、何らかの理由でナビゲートしません。 LoginScreenからHomeScreenに移行しようとしています。未定義のプロパティ 'navigation'を読み取ることができません

loginscreen:私が呼ぶところ

constructor(props){ 
    super(props) 
    this.state = { 
     email: '', 
     password: '', 
     status: '', 
    } 

    this.handlePress = this.handlePress.bind(this) 
    } 

    handlePress(){ 
    firebaseRef.auth().signInWithEmailAndPassword(this.state.email, this.state.password).then(function(firebaseUser){ 
     //Success, move to homepage. 
     const resetAction = NavigationActions.reset({ 
     index: 0, 
     actions: [ 
      NavigationActions.navigate({ routeName: 'Home'}) 
     ] 
     }) 

     this.props.navigation.dispatch(resetAction) <-- SAYS NAVIGATION IS UNDEFINED 
    }).catch(function(error){ 
     //Failed to log in, print error. 
     console.log(error) 
    }); 
    } 

これはhandlePressです:

const { navigation } = this.props.navigation; 

このアプリは、次のとおりです。これは、 'ナビゲーション'(中方法、loginscreenをレンダリングする)は

<TouchableOpacity style={styles.logBtn} onPress={()=>this.handlePress()}> 
    <Text style={styles.logTxt}> 
    Login 
    </Text> 
    </TouchableOpacity> 

です.jsナビゲーションを設定する場所:

import React from 'react'; 
import { AppRegistry } from 'react-native'; 
import { StackNavigator, TabNavigator } from 'react-navigation'; 
import Ionicons from 'react-native-vector-icons/Ionicons'; 

import LoginScreen from './app/screens/LoginScreen'; 
import RegisterScreen from './app/screens/RegisterScreen'; 
import HomeScreen from './app/screens/HomeScreen'; 
import FriendsScreen from './app/screens/FriendsScreen'; 

const Stylelist = StackNavigator({ 
    Login:{ 
    screen: LoginScreen, 
    navigationOptions: ({navigation}) =>({ 
     header: null, 
    }), 
    }, 
    Register:{ 
     screen: RegisterScreen, 
     navigationOptions: ({navigation}) =>({ 
     header: null, 
     }), 
    }, 
    Home:{ 
    screen: TabNavigator({ 
     Home: { 
     screen: HomeScreen, 
     navigationOptions: ({ navigation }) => ({ 
      title: 'Home', 
      tabBarIcon: ({ tintColor, focused }) => (
      <Ionicons 
       name={focused ? 'ios-home' : 'ios-home-outline'} 
       size={26} 
       style={{ color: tintColor }} 
      /> 
     ) 
     }), 
     }, 
     Friends: { 
     screen: FriendsScreen, 
     navigationOptions: ({ navigation }) => ({ 
      title: 'Friends', 
      tabBarIcon: ({ tintColor, focused }) => (
      <Ionicons 
       name={focused ? 'ios-people' : 'ios-people-outline'} 
       size={26} 
       style={{ color: tintColor }} 
      /> 
     ) 
     }), 
     }, 
    }), 
    navigationOptions: ({ navigation }) => ({ 
     title: 'Home', 
     headerStyle: {backgroundColor: "#553A91"}, 
     headerTitleStyle: {color: "#FFFFFF"}, 
    }), 
    } 
}); 
export default Stylelist; 

は、私が「キャッチ」からエラーをログに記録しようとしたと私はこのエラーを取得する:

Cannot read property 'navigation' of undefined 

私はそれを解決することができますか?

答えて

1

それは

const { navigate} = this.props.navigation; 

または

const { navigation } = this.props; 

する必要があります実際には、何を小道具に取得することは、あなたが何をしていたit.And方法をナビゲートしているナビゲーションオブジェクトは、

const { navigation } = this.props.navigation; 
たです

評価結果は

this.props.navigation.navigation 

実際には存在しないナビゲーションオブジェクト内のナビゲーションプロパティを検索すると、undefinedと表示されます。私はこれがあなたの疑いを解消することを願っています

+0

ありがとう、何らかの理由で今すぐ動作します。 –

+0

あなたはもっと説明してください/私に情報源を与えて、なぜこれがそのように機能しているのでしょうか? –

関連する問題