找不到变量：导航 - ReactNative 导航

Question

我几天以来一直在尝试解决这个问题。我想推动导航堆栈并导航到另一个视图。我在这里提到了这个官方文件。 https://reactnavigation.org。但我没有成功。请问谁能告诉我我哪里做错了。

连这个标题也没有出现。

static navigationOptions = {
        title: 'Welcome',
      };

这是我的 Login.js 代码。

import React, { Component } from 'react';

import { Text, View, StyleSheet, TextInput, TouchableOpacity, KeyboardAvoidingView, Image} from 'react-native';

import { StackNavigator } from 'react-navigation';

import {CirclesLoader, PulseLoader, TextLoader, DotsLoader, LinesLoader} from 'react-native-indicator';

var Spinner = require('react-native-spinkit');

import OrderList from './OrderList';

export default class Login extends Component {
    constructor(props){
        super(props);
         this.state = {
            username: '',
            password: '',
            showLoader: false,
            autoCorrect: false,
        }

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

/** Login Web Service **/
    _login(){
        this.setState({showLoader: true})
        const { username, password, showLoader } = this.state;
        console.log(username);
            let formdata = new FormData();
            formdata.append("username", username)
            formdata.append("password", password)
            formdata.append("device_type", 'I')
            fetch('http://www.URL.com.au/ws/login', {method: 'POST', body:formdata, headers: {'Accept':'application/json', 'Content-Type':'application/json',}})
            .then(function(response) {
                if(response.status == 200) return response.json();
                else throw new Error('Something went wrong on api server!');

                this.setState({showLoader: false})
            }.bind(this))
            .then(function(response) {
                console.log(response);

                /** NAVIGATE TO  ANOTHER VIEW - but getting cant find variable : navigate **/

                navigate('Home');
                this.setState({showLoader: false})
            }.bind(this))
            .catch(function(error) {
                console.error(error);

                this.setState({showLoader: false})
            }.bind(this));      
    }

    /** Even setting up navigation titile doesnt showup **/
    static navigationOptions = {
        title: 'Welcome',
      };


  render() {
    return (
      <KeyboardAvoidingView behavior="padding" style={styles.container}>
        <View style={styles.spinnerContainer}>
                     {this.state.showLoader && <LinesLoader />}
                     {/*<TextLoader text="Please wait" />*/}
                </View>
            <View style={styles.formContainer}>
                <TextInput style={styles.input} placeholder="Username" keyboardType="email-address" autoCapitalize="none" autoCorrect={this.state.autoCorrect} returnKeyType="next"
                onSubmitEditing={() => this.passwordInput.focus()}
                onChangeText={(username) => this.setState({username})}/>

                <TextInput style={styles.input} placeholder="Password" secureTextEntry returnKeyType="go"
                ref={(input) => this.passwordInput = input}
                onChangeText={(password) => this.setState({password})}/>

                <TouchableOpacity style={styles.buttonContainer} onPress={this._login}>
                    <Text style={styles.buttonText}>LOGIN</Text>
                    </TouchableOpacity>

                    </View>

    );
  }
}


const ReactNativeDemo = StackNavigator({
  Login: {screen: Login},
  Home: {screen: OrderList}
});

Answer 1

经过大量研究和其他反应式代码的测试后，它工作了。

需要在index.ios.js 文件上贴上以下代码。不在 Login.js 文件中。（我作为根使用的文件）

const ReactNativeDemo = StackNavigator({
  Login: {screen: Login},
  Home: {screen: OrderList}
});

以及文件路径和导航的导入

import Login from './src/components/main/Login';
import OrderList from './src/components/main/OrderList';
import { StackNavigator } from 'react-navigation';

Answer 2

您需要从const {navigate} = this.props.navigation; 等道具中获取navigate 选项。将此添加到您的登录方法中。

/** Login Web Service **/
    _login(){
        const {navigate} = this.props.navigation;
        this.setState({showLoader: true})
        const { username, password, showLoader } = this.state;
        console.log(username);
            let formdata = new FormData();
            formdata.append("username", username)
            formdata.append("password", password)
            formdata.append("device_type", 'I')
            fetch('http://www.URL.com.au/ws/login', {method: 'POST', body:formdata, headers: {'Accept':'application/json', 'Content-Type':'application/json',}})
            .then(function(response) {
                if(response.status == 200) return response.json();
                else throw new Error('Something went wrong on api server!');

                this.setState({showLoader: false})
            }.bind(this))
            .then(function(response) {
                console.log(response);


                navigate('Home');
                this.setState({showLoader: false})
            }.bind(this))
            .catch(function(error) {
                console.error(error);

                this.setState({showLoader: false})
            }.bind(this));      
    }