上一篇文章我們只是簡(jiǎn)單的搭了一個(gè)項(xiàng)目的首頁(yè)和集成了react navigation導(dǎo)航跳轉(zhuǎn)功能刹泄。在之前很多的項(xiàng)目都是需要強(qiáng)制登錄邏輯，lanuch之后是登錄頁(yè)面疏虫，登錄之后儲(chǔ)存登錄信息永罚，下次直接進(jìn)入首頁(yè)∑『簦現(xiàn)在實(shí)現(xiàn)以下這個(gè)邏輯，
首先：我們要用到react navigation的 createSwitchNavigator這個(gè)組件
import {
createSwitchNavigator,
}from 'react-navigation'
createSwitchNavigator
export default createAppContainer(createSwitchNavigator (
{
AuthLoading: AuthLoadingScreen,
App: MainScreen,
Auth: LoginStack
},
{
initialRouteName: 'AuthLoading',
}
))
用AuthLoading 這個(gè)類去判斷我們是否已經(jīng)登錄過(guò)了呢袱， 在AuthLoading決定跳轉(zhuǎn)到login 還是主頁(yè)官扣。
class AuthLoadingScreen extends React.Component {
constructor(props){
super(props);
this._bootstrpsAsyns();
}
_bootstrpsAsyns = async() =>{
const userToken = await AsyncStorage.getItem('userToken');
this.props.navigation.navigate(userToken ? 'App' : 'Auth');
}
render (){
return(<View>
<ActivityIndicator/>
<StatusBar barStyle = 'default'/>
</View>)
}
}
這里面需要用到AsyncStorage，讀取是否存在用戶信息羞福。
import {
AsyncStorage,
} from 'react-native'
以上是app.js里面的邏輯處理惕蹄，接下來(lái)就是登錄頁(yè)的邏輯，布局相關(guān)的代碼可以demo里進(jìn)行查看（布局比較丑治专，勿噴）卖陵。
先寫(xiě)一個(gè)函數(shù)用來(lái)做登錄處理：
_signInAsyncAction = async () => {
await AsyncStorage.setItem('userToken','abc')
this.props.navigation.navigate('App')
})
}
涉及到IO操作，用異步去處理一下张峰，接著寫(xiě)兩個(gè)輸入框和登錄按鈕泪蔫，點(diǎn)擊登錄獲取兩個(gè)輸入框的內(nèi)容進(jìn)行登錄
image.png
constructor(props){
super(props);
this.state = {
upText: null,
bottomText: null,
}
this._signInAsyncAction = this._signInAsyncAction.bind(this)
}
獲取upText，bottomText 做登錄請(qǐng)求
_signInAsyncAction = async () => {
fetch(LoginApi,{
method:'POST',
headers:{
Accept:'application/json',
'Content-Type':'application/json',
},
body:JSON.stringify({
phone:this.state.upText,
password:this.state.bottomText,
})
})
.then((response) => response.json())
.then((responseJson) => {
AsyncStorage.setItem('userToken','abc')
this.props.navigation.navigate('App')
})
.catch((error) => {
console.log(error);
})
}
在請(qǐng)求成功之后做相應(yīng)的跳轉(zhuǎn)就可以了挟炬。
demo地址 希望對(duì)您有所幫組鸥滨！
