Question

我正在尝试使用NavigationActions导航，但由于某种原因它无法导航。我正试图从LoginScreen转移到HomeScreen。

loginscreen：

$stmt = $mysqli->prepare('SELECT chat_user, chat_msg FROM chat_msg 
                          WHERE chat_id = ? 
                          AND chat_time > (NOW() - INTERVAL 1 SECOND) 
                          AND chat_user != ?');

这是我调用handlePress的地方：

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

这是'导航'（在渲染方法，登录屏幕中）：

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

这是我设置导航的app.js：

const { navigation } = this.props.navigation;

我试图从'catch'中记录错误，我收到此错误：

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;

我该如何解决？

Answer 1

应该是

const { navigate} = this.props.navigation;

或

const { navigation } = this.props;

实际上，你在道具中获得的是导航对象，其中包含导航方法。你正在做的是

const { navigation } = this.props.navigation;

这会得到评估

this.props.navigation.navigation

它说导航对象内部的导航属性，实际上不存在，因此给出undefined。我希望这可以解除你的怀疑。

Answer 2

我也有这个问题。我当然使用过setTimeout。可能会有人遇到这个问题，所以这是一个很好的提醒。

仅使用let that = this;

componentDidMount() {
    let that = this ;
    setTimeout(function () {
        let toHome = StackActions.reset({
            index: 0,
            actions: [NavigationActions.navigate({routeName: 'MainScreen'})]
        });
        that.props.navigation.dispatch(toHome);
    },3000);
}

Answer 3

确保您的函数与此绑定。

onPress={()=>this.handlePress()}

代替

onPress={()=>this.handlePress.bind(this)}

无法读取undefined的属性'navigation'

3 个答案: