Question

我是新的反应本机，我似乎只能找到如何在return（）方法中为反应本机在屏幕之间导航的文档。我想知道函数调用中导航的语法是什么。我遇到问题的一行是第37行（在登录功能中）。

import React, {Component} from 'react';
import {
  View,
  Text,
  TouchableHighlight,
  TouchableOpacity,
  TextInput
} from 'react-native';
import Input from './Input';
import Icon from 'react-native-vector-icons/MaterialIcons';
import {firebaseApp} from './App';
import {Tabs} from './Router';



export default class LoginScreen extends Component {
  constructor(props) {
    super(props)

    this.state = {
      email: '',
      password: '',
      status: ''
    }

    this.login = this.login.bind(this);
  }

  login(){
    console.log("Logging in");

    firebaseApp.auth().signInWithEmailAndPassword(this.state.email, this.state.password).catch(function(error) {
      console.log(error.code);
      console.log(error.message);
    })

    this.props.navigation.navigate('TabNav');

    console.log("Navigate to Home");

  }

  render() {
    var styles = require('./Styles');
    const {navigate} = this.props.navigation;

    return(
      <View style={styles.loginContainer}>
        <Text style={styles.loginHeader}>PRINCETON EVENTS</Text>
        <TextInput
          style={styles.loginInput}
          placeholder="Email"
          autoCapitalize='none'
          onChangeText={(text) => this.setState({email: text})}
          value={this.state.email}
          returnKeyType='next'/>
        <TextInput
          secureTextEntry
          style={styles.loginInput} placeholder="Password"
          onChangeText={(text) => this.setState({password: text})}
          value={this.state.password}
          autoCapitalize='none'
          returnKeyType='go'/>
        <TouchableOpacity style={styles.loginButton}>
          <Text style={styles.loginText} onPress={this.login}>LOGIN</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={styles.loginButton}
          onPress = {() => navigate('CreateAccount')}>
          <Text style={styles.loginText}> CREATE ACCOUNT </Text>
        </TouchableOpacity>
      </View>
    );

}
}

这是Router.js

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

import InputScreen from './InputPage';
import HomeScreen from './Home';
import DetailsScreen from './Details';
import MyEventsScreen from './MyEvents';
import EditScreen from './EditPage';
import MapScreen from './Map';
import CreateAccountScreen from './CreateAccount';
import LoginScreen from './Login';

export const MyEventsStack = StackNavigator({

  MyEvents: {
    screen: MyEventsScreen,
    navigationOptions: {
      header: null
    }
  },
  MyEventsDetails: {
    screen: EditScreen,
    navigationOptions: {
      header: null,

    },
  },

});


export const EventsStack = StackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      header: null,
    },
  },
  Details: {
    screen: DetailsScreen,
    navigationOptions: {
      header: null,
    },
  },
});

export const Tabs = TabNavigator({
  Home: {screen: EventsStack},
  EventMap: {screen: MapScreen},
  Input: {screen: InputScreen},
  MyEvents:{screen: MyEventsStack},
},{
    tabBarOptions: {
      activeTintColors: '#e91e63',
    }
});

export const LoginNav = StackNavigator({
  Login: { screen: LoginScreen,
    navigationOptions: {
      header: null,
    },
  },
  CreateAccount: { screen: CreateAccountScreen,
    navigationOptions: {
      header: null,
    }
  },
});

/*export const SuccessLoginNav = StackNavigator({
  Main: { screen: Tabs,
    navigationOptions: {
      header: null,
    }
  },
});*/



export const Root = StackNavigator({
  TabNav: {
    screen: Tabs,
  }


}, {headerMode: 'none'});

Answer 1

在login中，您声明了一个函数，但既没有调用它也没有将它赋值给任何函数：

() => this.props.navigation.navigate('Home');

基本上这条线什么都不做。尝试删除匿名函数声明：

this.props.navigation.navigate('Home');

在函数调用中中断的反应导航

1 个答案: