如何将承载令牌作为参数发送并在React Native的另一个屏幕中检索它

我想从一个屏幕发送承载令牌作为参数并检索另一个屏幕并将其发送到侧边栏。

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)
{
const usertoken =  responseJson.token;    
this.props.navigation.navigate({routeName:'QrScan'});
}
else{
Alert.alert(responseJson);
}
}).catch((error) => {
console.error(error);
});
}

}

下面是我想要检索参数并将其导航到侧边栏

的屏幕

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>
);
}
}

这是sidebar.js，我想在其中检索令牌并使用它来注销

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>
<Text style={{fontSize: 24}}>Log Out</Text>       
</Button> 
</Content>
</Container>
);
}
}

这是一个博览会项目，我使用的是react导航4.4.3。

您可以使用redux从一个组件到另一个组件共享数据

https://react-redux.js.org/introduction/basic-tutorial

我找到了答案，在Login.js中我将承载令牌存储在UserLoginFunction中

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) => {
if(responseJson)
{
this.props.navigation.navigate('QrScan',{usertoken:responseJson.token});
}
else{

Alert.alert(responseJson);
}

}).catch((error) => {
console.error(error);
});
}

在qrscan.js中，我像这样检索了承载令牌

constructor(props) {
super(props)
this.state = {
token: ''
}
}
componentDidMount(){
this.setState({
token: this.props.navigation.state.params.usertoken,
})
}

然后我再次发送令牌到侧边栏，像这样在render

render()
{
// const authtoken= this.props.navigation.getParam('usertoken');
//console.log(this.state.token);
return(
<Drawer
ref={(ref) => { this.drawer = ref; }}
content={<SideBar navigator={this.navigator} closeDrawer={this.closeDrawer} usertoken={this.state.token} />}
onClose={() => this.closeDrawer()} >
<Container>
</Container>
</Drawer>
);
}

我在侧栏中检索了承载令牌，像这样

render() {
console.log(this.props.usertoken);
return ()
}

相关内容

最新更新

热门标签：