React Native, 인증 토큰을 인덱스로 전달

Question

색인에 탐색 컴포넌트가있는 앱을 생성하고 있습니다. 시작할 때 로그인 페이지로 자동 이동합니다. 이 로그인 페이지에서 사용자에게 인증 토큰이 제공됩니다. 이 토큰을 색인으로 다시 가져와 나머지 응용 프로그램에서 사용할 수 있습니까? 감사!

index.android.js

//lots of imports 
export default class CBURecCenterApp extends Component { 

constructor(){ 
    super() 
    this.renderScene = this.renderScene.bind(this) 
} 

renderScene(route, navigator){ 
    switch(route.name){ 
     case 'Home': 
      return <HomePage navigator={navigator} /> 
      break; 
     case 'Calendar': 
      return <CalendarPage navigator={navigator} /> 
      break; 
     case 'Events': 
      return <EventsPage navigator={navigator} /> 
      break; 
     case 'Discover': 
      return <DiscoverPage navigator={navigator} /> 
      break; 
     case 'Profile': 
      return <ProfilePage navigator={navigator} /> 
      break; 
     case 'Settings': 
      return <SettingsPage navigator={navigator} /> 
      break; 
     case 'Info': 
      return <InfoPage navigator={navigator} /> 
      break; 
     case 'Login': 
      return <LoginPage navigator={navigator} /> 
      break; 
     case 'Register': 
      return <RegisterPage navigator={navigator} /> 
      break; 
     default: 
      return <ErrorPage navigator={navigator} /> 
    } 
} 
render() { 
    return (
     <Navigator 
     initialRoute={{name: 'Login'}} 
     renderScene={this.renderScene} 
     /> 
    ); 
    } 
} 

AppRegistry.registerComponent('CBURecCenterApp',() => CBURecCenterApp); 

LoginPage.js

import React, { Component, PropTypes } from 'react'; 
import { View, Text, TextInput, StyleSheet, TouchableHighlight} from 'react- native'; 
import Api from '../Utility/Api'; 


export default class LoginPage extends Component { 

constructor(props) { 
    super(props); 
    this.state = { 
     userName: null, 
     password: null 
     }; 
    } 

    navigate(name){ 
     this.props.navigator.push({ 
      name 
     }) 
    } 

    submitLogin(){ 
    response: Api.login(
     this.state.userName, 
     this.state.password 
    ); 
    if(response.status === 200){ 
     //pass authentication token to index.android.js 
     //navigate to home page 
    } 
    else{ 
     //invalid username/password handling code 
    } 
    } 

render(){ 
    return (
     <View> 
      <TextInput 
       style={styles.textField} 
       onChangeText={(userName) => this.setState({userName})} 
       value={this.state.userName} 
       keyboardType = {'email-address'} 
       autoCorrect = {false} 
       placeholder = {'CBU Email'} 
      /> 
      <TextInput 
       style={styles.textField} 
       onChangeText={(password) => this.setState({password})} 
       value={this.state.password} 
       keyboardType = {'email-address'} 
       autoCorrect = {false} 
       placeholder = {'password'} 
       secureTextEntry={ true } 
      /> 
     </View> 
    ) 
    } 
} 

const styles = StyleSheet.create({ 
textField: { 
    height: 40, 
    borderColor: 'gray', 
    borderWidth: 1 
} 
}) 

Answer 1

를 사용하여 로컬 스토리지는 단순히 네비게이터에 소품을 통과 찾고 있었다 인증을

this.props.login({ 
    email: this.state.email, 
    password: this.state.password 
}, function(err, token) { 
    if (err) console.log(err); 
    if(token) { 
     AsyncStorage.setItem("jwt", token, this._navToOffers); 

    } 
}) 

Answer 2

을 확인 , 나는 이것이 네비게이션 스택에 밀어 넣을 때 단순히 소품을 건네줌으로써 달성 될 수 있음을 알게되었습니다.

 navigate(name){ 
     this.props.navigator.push({ 
      name: name, 
      token: this.state.response 
     }) 
    }