如何從一個屏幕導航到另一個scree in react native>？

說明：我已經在android.I中使用native native了。我開始使用登錄屏幕並使用API成功調用將參數傳遞到另一個屏幕。我使用StackNavigation導航屏幕。成功登錄後，它將移動到另一個帶參數的屏幕。如何從一個屏幕導航到另一個scree in react native>？

問題： API調用成功，但導航屏幕未更改。像undefined這樣的錯誤不是一個函數（評估'_this.props.navigator（'SecondScreen'）'）

我已經在這裏發佈我的所有代碼。

index.android.js //這是應用程序的入口點。它將調用第一個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和按鈕。當我點擊按鈕時，它將調用登錄方法，登錄方法將使用登錄API的可能憑據調用API。成功登錄後，它應該移動到另一個屏幕。

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

請幫我解決了這個問題，在本土作出反應。先謝謝你。

來源

2017-08-25 Milan Gajera

有中有個錯字在App.js

this.props.navigator('SecondScreen')

應該

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

來源

2017-08-25 06:37:56 alexdriedger

在API調用成功響應的構造？ –

請問您如何識別問題？ –

如果我想將值傳遞給另一個屏幕，我該怎麼辦？ –

如何從一個屏幕導航到另一個scree in react native>？

回答

相關問題