开发者问题收集

通过调用 onPress 函数导航到新屏幕

2019-08-20
497

我想使用我的 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>
    );
  }
}

我也将仪表板添加到了我的 Stack Navigation 文件中。如果您能提供任何指导,那就太好了。非常感谢!

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

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

export default createAppContainer(AppNavigator);

1个回答

添加此

onLogin=()=> {
    const { Email, password } = this.state;
    const { navigation } = this.props;
    navigation.navigate('Dashboard');
  }
Aurangzaib Rana
2019-08-20