我正在开发一个使用 api 登录并使用检索到的令牌注销的应用程序。
这是我的 App.js
import React from 'react';
import AppNavigator from './src/navigations/Navigator';
import * as Font from 'expo-font';
import { Ionicons } from '@expo/vector-icons';
export default class App extends React.Component {
state= {
isReady : false
}
async componentDidMount() {
await Font.loadAsync({
Roboto: require('native-base/Fonts/Roboto.ttf'),
Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
...Ionicons.font,
});
this.setState({ isReady: true });
}
render() {
return (
<AppNavigator />
);
}
}
这是我的 navigator.js
import React from 'react';
import {createStackNavigator} from 'react-navigation-stack';
import {createAppContainer} from 'react-navigation';
import Login from '../screens/Login';
import QrScan from '../screens/qrscan';
const AppNavigator = createStackNavigator({
Login:{
screen:Login,
navigationOptions : {
headerShown:false
}
},
QrScan:{
screen:QrScan,
navigationOptions : {
headerTitle:''
}
}
},
);
export default createAppContainer(AppNavigator);
这是登录屏幕 login.js
import React from 'react';
import {Button,Text,View,Image,TextInput,SafeAreaView,ImageBackground,Alert} from 'react-native';
export default class Login extends React.Component{
constructor(props) {
super(props)
this.state = {
UserName: '',
UserPassword: ''
}
}
UserLoginFunction = () =>{
const { UserName } = this.state ;
const { UserPassword } = this.state ;
fetch('https://api.idepoz.com/ncl/api/login', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
username: UserName,
password: UserPassword
})
}).then((response) => response.json())
.then((responseJson) => {
//console.log(responseJson);
if(responseJson)
{
this.props.navigation.navigate({routeName:'QrScan'});
}
else{
Alert.alert(responseJson);
}
}).catch((error) => {
console.error(error);
});
}
render(){
const {navigate} = this.props.navigation
return(
<SafeAreaView style={{flex: 1,
}}>
<ImageBackground
style={{ flex: 1,width: "100%", height: "100%"}}
//We are using online image to set background
source={require('../images/rsz_care.jpg')}
>
<View style={{
flexDirection:"row",
justifyContent: 'center',
alignItems:"center",
marginHorizontal:55,
borderWidth:2,
marginTop:100,
paddingHorizontal:10,
borderColor:"#00716F",
borderRadius:23,
paddingVertical:2
}}>
<TextInput
placeholder="Enter Username"
style={{paddingHorizontal:10}}
onChangeText={UserName => this.setState({UserName})}
/>
</View>
<View style={{
flexDirection:"row",
justifyContent: 'center',
alignItems:"center",
marginHorizontal:55,
borderWidth:2,
marginTop:15,
paddingHorizontal:10,
borderColor:"#00716F",
borderRadius:23,
paddingVertical:2
}}>
<TextInput
placeholder="Enter Password"
style={{paddingHorizontal:10}}
onChangeText={UserPassword => this.setState({UserPassword})}
/>
</View>
<View style={{
justifyContent: 'center',
alignItems:"center",
marginTop:15
}}>
<Button title="Forward" onPress={this.UserLoginFunction} color= "#00716F"/>
</View>
</ImageBackground>
</SafeAreaView>
)
}
}
成功登录qrscan.js后加载如下页面
import React from 'react';
import { Container, Header, Title, Drawer, Content, Footer, FooterTab, Button, Left, Right, Body, Text } from 'native-base';
import { Alert } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons';
import { Ionicons } from '@expo/vector-icons';
import SideBar from './components/SideBar';
export default class QrScan extends React.Component{
closeDrawer = () => {
this.drawer._root.close();
}
openDrawer = () => {
this.drawer._root.open();
}
render()
{
return(
<Drawer
ref={(ref) => { this.drawer = ref; }}
content={<SideBar navigator={this.navigator} closeDrawer={this.closeDrawer}/>}
onClose={() => this.closeDrawer()} >
<Container>
<Header>
<Left>
<Button transparent onPress={this.openDrawer.bind(this)}>
<MaterialIcons name="list" size={40} color="#FFFFFF" />
</Button>
</Left>
<Body>
<Title></Title>
</Body>
<Right>
<Button transparent>
<Ionicons name="search" size={40} color="#FFFFFF" onPress={() => Alert.alert('Search Button pressed')} />
</Button>
</Right>
</Header>
<Content>
<Text>
</Text>
</Content>
</Container>
</Drawer>
);
}
}
以下是我用于抽屉的侧边栏
import React from 'react';
import { Text, Alert } from 'react-native';
import { Drawer,Container, Content, Header, Right, Button } from 'native-base';
import { FontAwesome } from '@expo/vector-icons';
export default class SideBar extends React.Component {
render() {
return (
<Container>
<Header>
<Right>
<Button transparent>
<FontAwesome name="close" size={24} color="#FFFFFF" onPress={() => this.props.closeDrawer()} />
</Button>
</Right>
</Header>
<Content>
<Button transparent onPress={}>
<Text style={{fontSize: 24}}>Log Out</Text>
</Button>
</Content>
</Container>
);
}
}
我可以使用api登录。我正在检索令牌，我已经控制台记录了它。但我无法存储令牌，我正在尝试使用该令牌从侧边栏注销。有人可以帮忙吗？
答案 0 :(得分：0)
创建一个全局状态来存储用户信息并在屏幕上的任何位置访问它。
全局状态管理：
查看文档了解更多信息：