我正在一个项目中，在该项目中我从API得到响应，并且应该在该响应的基础上显示“抽屉内容”。我有3个屏幕，登录，仪表板和DrawerContent。
单击登录按钮后，应用程序导航到放置抽屉的仪表板屏幕。
但是我不知道如何将数据传递给DrawerContent.js。
请注意，我要将Json Response从登录屏幕传递到DrawerContent.js
//App.js
import React, {Component} from 'react';
import {LoginScreen} from './Screens/LoginScreen';
import {DashboardScreen} from './Screens/Dashboard';
import {DrawerContent} from './Drawer/DrawerContent';
import {CorporateChequeScreen} from './Screens/CorporateCheque';
import {NavigationContainer} from '@react-navigation/native';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {createStackNavigator, HeaderBackButton, HeaderTitle} from '@react-navigation/stack';
const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();
function DashboardScreenDrawer(){
return(
<Drawer.Navigator drawerContent={props => <DrawerContent {...props} />}>
<Drawer.Screen name="Dashboard" component={DashboardScreen} />
</Drawer.Navigator>
)
}
export default function App () {
return(
<NavigationContainer>
<Stack.Navigator initialRouteName="Login">
<Stack.Screen name="Login" component={LoginScreen} options={{headerShown:false}} />
<Stack.Screen name="Dashboard" component={DashboardScreenDrawer} options={{headerShown:false}} />
<Stack.Screen name="Corporate Cheque" component={CorporateChequeScreen}
options={{HeaderBackButton:true, headerStyle:{backgroundColor:'#6f1a6d'}, headerTintColor:'#fff',
headerTitleStyle:{marginLeft:30}}}
/>
</Stack.Navigator>
</NavigationContainer>
)
}
//login.js
if(responseCode == "00")
{
var menuCode;
var menuName;
responseJson.Response.UserRights.map((itemUR) => (
menuCode = itemUR.MenuCode,
menuName = itemUR.MenuName,
menuCode = CryptoED.decryptData(menuCode, key),
menuName = CryptoED.decryptData(menuName, key)
))
setIsLoading(false);
showToastWithGravity("Logged In Successfully!");
// navigation.navigate("Dashboard", {menucode: 'menuCode Data'});
navigation.navigate("Dashboard",{
screen: "Dashboard",
params: {menucode:'menuCode Data'}
})
}
//DrawerContent.js
import * as React from 'react';
import { View , TouchableOpacity , StyleSheet, Alert , Image} from 'react-native';
import { DrawerContentScrollView, DrawerItem} from '@react-navigation/drawer';
import {Avatar, Title, Text, Caption, Drawer, List, Paragraph, TouchableRipple, Switch} from 'react-native-paper';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
export function DrawerContent({route,navigation}, props){
// const {menucode} = route.params;
// var ddd = menucode;
// const item = navigation.navigate.getParam('menucode');
// const [username, setUsername] = useState('');
// const [password, setPassword] = useState('');
return(
<View style={{flex:1}}>
<DrawerContentScrollView {...props}>
<View style={styles.drawerContent}>
<View style={styles.userInfoSection}>
<View style={{flexDirection:'row',marginTop: 14}}>
{/* <Avatar.Image
source={{
uri: 'https://api.adorable.io/avatars/50/abott@adorable.png'
}}
size={50}
/> */}
<Avatar.Text style={{backgroundColor : "#f19b14"}} color={'#fff'} label="F" />
<View style={{marginLeft:4, flexDirection:'column'}}>
<Title style={styles.title}>Faraz Ahmed</Title>
<Caption style={styles.caption}>faraz@gmail.com</Caption>
</View>
<View style={{marginLeft:10, bottom :20, flexDirection:'column'}}>
<Image style={{width: '100%' ,padding : 12 ,top : 11, height: '2%'}} source={ require("../Images/Menu/Infoicon.png")} />
</View>
</View>
</View>
<View >
<List.Section style={styles.ulmain }>
{/* Account Summary */}
<List.Accordion style={styles.ul }
title={<Text style={styles.ulText}>Account Summary</Text>}
>
</List.Accordion>
{/* Generate Pin */}
<List.Accordion style={styles.ul }
title={<Text style={styles.ulText}>Generate Pin</Text>}
onPress={() => {}}
>
</List.Accordion>
{/* Create Transaction style={styles.ul ,{ marginLeft : 11,marginRight : 11 ,borderBottomColor : "#000" ,borderBottomWidth : 1 }}*/}
<List.Accordion style={styles.ul }
title={<Text style={styles.ulText}>Create Transaction</Text>}
onPress={() => {}}
>
<List.Item
left={props =><Image style={{width: '15%' ,padding : 10,margin:11, height: '92%'}} source={ require("../Images/Menu/1.png")} />}
title={<Text style={{ fontSize: 14, color : "#949494" ,fontFamily: 'Poppins-Medium'}}>Corp Cheque</Text>}
onPress={()=>navigation.navigate("Corporate Cheque")}
/>
<List.Item
left={props =><Image style={{width: '15%' ,padding : 10,margin:11, height: '92%'}} source={ require("../Images/Menu/2.png")}/>}
title={<Text style={{ fontSize: 14, color : "#949494" ,fontFamily: 'Poppins-Medium'}}>MBL to MBL</Text>} />
<List.Item
left={props =><Image style={{width: '12%',margin:1, height: '90%', borderRadius: 0}} source={ require("../Images/Menu/3.png")}/>}
title={<Text style={{ fontSize: 14, color : "#949494" ,fontFamily: 'Poppins-Medium'}}>IBFT</Text>} />
<List.Item
left={props =><Image style={{width: '12%',margin:1, height: '90%', borderRadius: 0}} source={ require("../Images/Menu/4.png")}/>}
title={<Text style={{ fontSize: 14, color : "#949494" ,fontFamily: 'Poppins-Medium'}}>CoC</Text>} />
<List.Item
left={props =><Image style={{width: '12%',margin:1, height: '90%', borderRadius: 0}} source={ require("../Images/Menu/5.png")}/>}
title={<Text style={{ fontSize: 14, color : "#949494" ,fontFamily: 'Poppins-Medium'}}>RTGS</Text>} />
</List.Accordion>
{/* File Summary */}
<List.Accordion style={styles.ul }
title={<Text style={styles.ulText}>File Summary</Text>}
onPress={() => {}}
>
</List.Accordion>
{/* About*/}
<List.Item
title={<Text style={styles.ulText}>About</Text>}
onPress={() => {}}
/>
{/* Help
<List.Item style={styles.ul }
title={<Text style={styles.ulText}>Help</Text>}
onPress={() => {}}
/> */}
</List.Section>
</View>
</View>
</DrawerContentScrollView>
<Drawer.Section style={styles.bottomDrawerSection}>
<DrawerItem
icon={({color, size}) => (
<Icon
name="exit-to-app"
color={color}
size={size}
/>
)}
label="Sign Out"
onPress={() => {}}
/>
</Drawer.Section>
</View>
)
}