5

几天以来，我一直在尝试解决这个问题。我想推动导航堆栈并导航到另一个视图。我在这里提到了这个官方文件。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}
});
4

2 回答 2

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';
于 2017-04-12T16:47:20.343 回答
0

您需要navigate从道具中获取选项，例如const {navigate} = this.props.navigation;.Add this to your login method 。

/** 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));      
    }
于 2017-04-12T06:39:48.227 回答