反应本机屏幕加载功能

您好我想检查，如果没有导航登录用户的用户登录屏幕，但应用程序第一次打开时用户将导航到登录屏幕如何运行只有一个屏幕加载反应本机屏幕加载功能

代码

componentDidMount(){ 


AsyncStorage.getItem('islogin', (err, result) => { 
    console.log(result); 
    if (result!==true){ 
    this.setState({login:false}) 

    } 
    }); 
} 

render() { 
    if(this.state.login==false){ 

    const { navigate } = this.props.navigation; 

    navigate('profile',{ name: 'cat' }) 
    } 
}

来源

2017-10-16 Poorya Taghizade

将您的代码移入componentWillReceiveProps。在导航上，你的组件将收到新的道具和componentWillReceiveProps将被调用。所以在这里你可以检查AsyncStorage并导航用户。

componentDidMount(){ 
    AsyncStorage.getItem('islogin', (err, result) => { 
    console.log(result); 
    if (result!==true){ 
     this.setState({login:false})   
    } 
    }); 
} 

shouldComponentUpdate(nextProps, nextStates) { 
    console.log(nextState) 
    if(nextState.login == false) 
    this.props.navigation.navigate('profile',{ name: 'cat' }); 
} 
render() { 

}

来源

2017-10-16 08:58:51 SNT

我登录了componentWillReceiveProps控制台。但从来没有触发 –

我以为你正在使用REDX。 shouldComponentUpdate将为你工作。我添加了一些代码示例 – SNT

但反应导航选项卡更改不重新安装组件 –

我使用react-native-router-flux路由，如代码来描述你可以做有条件的状态。

import React, {Component} from 'react'; 
import {AsyncStorage} from 'react-native'; 
import {Scene, Router} from 'react-native-router-flux'; 

//Splash 
import Splash from '../splashscreen_component'; 


//Home 
import HomeScreen from '../home_component/HomeScreen'; 

//Login 
import Signin from '../login_component/Signin'; 

var KEY = 'isLIn'; 

export default class AppRoutes extends Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     isLoggedIn: false, 
     isLoading: true 
    }; 
    } 

    componentWillMount() { 
    this._loadInitialState().done(); 
    } 

    async _loadInitialState() { 
    try { 
     let value = await AsyncStorage.getItem(KEY); 
     if (value !== null && value === 'true') { 
     this.setState({isLoggedIn: true, isLoading: false}); 
     } else { 
     this.setState({isLoggedIn: false, isLoading: false}); 
     } 
    } catch (error) { 
     console.error('Error:AsyncStorage:', error.message); 
    } 
    }; 

    _loginscreen() { 
    return (
     <Scene key="root" hideNavBar hideTabBar> 
     <Scene key="Signin" component={Signin} title="Signin" initial panHandlers={null}/> 
     <Scene key="Home" component={HomeScreen} title="Home" panHandlers={null}/> 

     </Scene> 
    ); 
    } 

    _homescreen() { 
    return (
     <Scene key="root" hideNavBar hideTabBar> 
     <Scene key="Home" component={HomeScreen} title="Home" initial panHandlers={null}/> 

     </Scene> 
    ); 
    } 

    render() { 
    if (this.state.isLoading === true) { 
     return (<Splash/>); 
    } else { 
     if (this.state.isLoggedIn === true) { 
     return (
      <Router>{this._homescreen()}</Router> 
     ); 
     } else { 
     return (
      <Router>{this._loginscreen()}</Router> 
     ); 
     } 
    } 
    } 
}

来源

2017-10-16 08:59:39

反应本机屏幕加载功能

回答

相关问题