如何在本机反应中从一个屏幕导航到另一个屏幕? [英] How to navigate from one screen to another scree in react native>?

问题描述

说明:我在 android 中使用 react native.我从登录屏幕开始，并使用 API 成功调用将参数传递到另一个屏幕.我使用 StackNavigation 来导航屏幕.登录成功后会跳转到另一个带参数的界面.

Explanation: I have working with react native in android.I started with the login screen and pass the parameter to another screen using API success call.i used a StackNavigation to navigate the screen. After successful login it will move to another screen with parameter.

问题: API 调用成功，但导航屏幕未更改.触发类似 undefined is not a function 的错误(评估 '_this.props.navigator('SecondScreen')')

Issue: API call is success but the navigation screen is not changed. fire an error like undefined is not a function (evaluating '_this.props.navigator('SecondScreen')')

我已经把我所有的代码都贴在这里了.

I have post my all code over here.

index.android.js//这是应用程序的入口点.它将调用第一个 App.js.

index.android.js // This is the entry point of an application. It will cal the first App.js.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React,{Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';

import App from './src/components/App';
import SecondScreen from './src/components/SecondScreen';
import {StackNavigator} from 'react-navigation';

export default class reactNavigationSample extends Component{
  render(){
      const {navigation} =this.props;
    return(
          <App navigation ={navigation}/>
    );
  }
}
const SampleApp = StackNavigator({
    Home:{screen:App},
    SecondScreen:{screen: SecondScreen}
});
AppRegistry.registerComponent('AwesomeProject', () => SampleApp);

App.js

//这个文件有一个 UI，它是两个 TextInput 和 Button.当我单击按钮时，它将调用登录方法，登录方法将使用登录 API 的可能凭据调用 API.成功登录后，它应该移动到另一个屏幕.

// This file have a UI which is two TextInput and Button. When i click on button it will call the login method and the login method will call the API with the possible credentials of the login API. After successfull login it should move to another screen.

export default class App extends Component{
    static navigationOptions ={
        title : 'Home Screen',
    }
    constructor(props){
        super(props);
        navigate = props.navigation,
        this.state={email:'',password:'',device_token:'',device_type:''};

    }
    login = () => {
        fetch('http://span.mobiosolutions.com/api/v1/login',{
            method:'POST',
            headers:{
                'Accept':'application/json',
                'Content-Type':'application/json',
            },
            body:JSON.stringify({
                email: this.state.username,
                password: this.state.password,
                device_token: 'aajdflkajdjfajdflkj',
                device_type: '1'
            })
        })
        .then((response) => response.json())
            .then((res) => {
                if(res.statusCode === 1){
                    console.log(res);
                    var username=res.message;
                    AsyncStorage.setItem('username',username);
                    this.props.navigator('SecondScreen')
                }else{
                    alert(res.message);
                }
            })
            .done();
    }
    render(){
        const {navigate} = this.props.navigation;
        return(
            <View style={styles.container}>

                <Image source={require('../img/background.jpg')} style={styles.backgroundImage}>
                    <View style={styles.content}>
                        <Text style={styles.logo}>- NATIVE -</Text>

                        <View style={styles.inputContainer}>

                            <TextInput underlineColorAndroid='transparent' style={styles.input}
                                       onChangeText={(username) => this.setState({username})}
                                       value={this.state.username}
                                       placeholder='username' />

                            <TextInput secureTextEntry={true} underlineColorAndroid='transparent' style={styles.input}
                                       onChangeText={(password) => this.setState({password})}
                                       value={this.state.password} placeholder='password'/>
                            {/*<Button*/}
                            {/*onPress={() => navigate('SecondScreen')}*/}
                            {/*title="Login"/>*/}

                            <Button
                                onPress={this.login}
                                title="Login"/>
                        </View>
                    </View>
                </Image>
            </View>
        )
    }
}

const styles=StyleSheet.create({
    container:{
        flex:1,
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'#F5FCFF',
    },
    backgroundImage:{
        flex:1,
        alignSelf:'stretch',
        width:null,
        justifyContent:'center',
    },
    welcome:{
        fontSize:20,
        textAlign:'center',
        margin:10,
    },
    instructions:{
        textAlign:'center',
        color:'#333333',
        marginBottom:5,
    },
    content:{
        alignItems:'center',
    },
    logo:{
        color:'white',
        fontSize:40,
        fontStyle:'italic',
        fontWeight:'bold',
        textShadowColor:'#252525',
        textShadowOffset:{width:2,height:2},
        textShadowRadius:15,
        marginBottom:20,
    },
    inputContainer:{
        margin:20,
        marginBottom:0,
        padding:20,
        paddingBottom:10,
        alignSelf:'stretch',
        borderWidth:1,
        borderColor:'#fff',
        backgroundColor:'rgba(255,255,255,0.2)',
    },
    input:{
        fontSize:16,
        height:40,
        padding:10,
        marginBottom:10,
        backgroundColor:'rgba(255,255,255,1)',
    },
});

SecondScreen.js

const SecondScreen = () => {
    return(
        <View style={styles.container}>
            <Text style={styles.welcome}>
                THIS IS THE SECOND SCREEN.
            </Text>
        </View>
    );
}
const styles=StyleSheet.create({
    container:{
        flex:1,
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'#F5FCFF',
    },
    welcome:{
        fontSize:20,
        textAlign:'center',
        margin:10,
    },
    instructions:{
        textAlign:'center',
        color:'#333333',
        marginBottom:5,
    },
});


SecondScreen.navigationOptions ={
    title: 'Second Screen Title'
}

export default SecondScreen

请帮我在 React Native 中解决这个问题.提前致谢.

Please help me solved out this issue in React Native. Thank you in advance.

推荐答案

App.js

this.props.navigator('SecondScreen')

应该是

this.props.navigation.navigate('SecondScreen')

这篇关于如何在本机反应中从一个屏幕导航到另一个屏幕?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！