Question

我想使用我的onLogin（）函数导航到我正在构建的Android MVP的仪表板视图。尽管不了解我，但我一直被投入到React Native项目中，而我才刚刚开始我的职业生涯，所以答案可能很痛苦，很明显，但是经过大量研究，我还是无法解决！希望你们中的一员能指导我解决问题。

我已经复制了下面的“登录”视图。


import React, { Component } from 'react';
import { 
    TouchableHighlight, 
    TextInput, 
    Text, 
    View, 
    Image
 } from 'react-native';
import styles from "./../style/CustomStylesheet";

export default class Login extends Component {
  constructor(props) {
    super(props);

    this.state = {
      Email: '',
      password: '',
    };
  }

  onLogin() {
    const { Email, password } = this.state;
    //insert function to navigate to dashboard here?
  }

  render() {
    return (
      <View style={styles.container}>
        <Image
        style={styles.logo}
        source={require('./../../android/app/src/main/res/drawable/login.png')}
        />

        <TextInput
          value={this.state.Email}
          onChangeText={(Email) => this.setState({ Email })}
          placeholder={'Email'}
          placeholderTextColor={'#333333'}
          style={styles.input}
          inlineImageLeft='login_id'
        />
        <TextInput
          value={this.state.password}
          onChangeText={(password) => this.setState({ password })}
          placeholder={'Password'}
          placeholderTextColor={'#333333'}
          secureTextEntry={true}
          style={styles.input}
          inlineImageLeft='login_password'
        />

        <View style={styles.help}>
          <Text>Need help?</Text>
        </View>

        <TouchableHighlight
          style={[styles.input, styles.button]}
          onPress={this.onLogin.bind(this)}>
          <Text style={styles.buttonText}>LOGIN</Text>
        </TouchableHighlight>

        <View style={styles.modal}>
          <Text style={styles.modalText}>New user?</Text>
          <Text style={styles.modalText}>Register on our web app or our iPad app</Text>
        </View>
      </View>
    );
  }
}

我也将仪表板添加到了我的堆栈导航文件中。您可以提供的任何指导都是很棒的。非常感谢！

import Login from "./Login";
import Dashboard from "./Dashboard";

const AppNavigator = createStackNavigator(
  {
    Home: { screen: Login },
    Dashboard: { screen: Dashboard }
  },
  {
    headerMode: 'none'
  }
);

export default createAppContainer(AppNavigator);

Answer 1

添加此

onLogin=()=> {
    const { Email, password } = this.state;
    const { navigation } = this.props;
    navigation.navigate('Dashboard');
  }

通过调用onPress功能导航到新屏幕

1 个答案: