Question

我必须在我的应用中显示已登录的用户。我可以在需要将用户数据传递到App.js的{{1}}中获取用户信息。我在其他文件中设置了路线。我已将路线设置为

Route.js

和App.js为

import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createDrawerNavigator, DrawerItems } from 'react-navigation-drawer';
import Icon from 'react-native-vector-icons/FontAwesome';
// screens
import Login from '../screens/login';
import Logout from '../screens/logout';
import activity from '../screens/activity';
import addActivity from '../screens/addActivity';
import AuthLoadingScreen from '../screens/authLoading';
import OrganizationScreen from '../screens/organization';
import ContactScreen from '../screens/contact';
import AllContact from '../screens/allcontact';
import ContactAdd from '../screens/contactAdd';
import OrganizationAdd from '../screens/organizationAdd';
import DealForm from '../screens/dealForm';
import MyDeals from '../screens/mydeals';
import Mis from '../screens/mis';
import Misgraph from '../screens/misgraph';
import Deals from '../screens/deals';
import Dashboard from '../screens/dashboard';
import AddTarget from '../screens/addTarget';
import AddDeal from '../screens/addDeal';
import { Container, Header, Body, Content, Text} from 'native-base';
export const AuthStack = createStackNavigator(
  {
    Register: {
      screen: Login,
    },
  },
  {
    headerMode: 'none',
  },
);
export const DashboardStack = createStackNavigator(
  {
    Dashboard: {
      screen: Dashboard,
    },
    AddTarget: {
      screen: AddTarget,
    },
    AddDeal: {
      screen: AddDeal,
    },
  },
  {
    initialRouteName: 'Dashboard',
    headerMode: 'none',
  },
);
const CustomDrawerContentComponent = (props) => (
  <Container>
    <Header style={{ backgroundColor: 'grey'}}>
      <Body>
        <Text> <Icon name="user" color="#fff" size={20} /></Text>
      </Body>
    </Header>
    <Content>
      <DrawerItems {...props} />
    </Content>
  </Container>
)
export const Drawer = createDrawerNavigator({
  Dashboard: {
    screen: DashboardStack,
  },
  Deal: {
    screen: DealForm,
  },
  MyDeal: {
    screen: MyDealStack,
    navigationOptions: {
      drawerLabel: 'My Deals',
    },
  },
  Organization: {
    screen: OrganizationStack,
  },
  Contact: {
    screen: ContactStack,
  },
  Performance: {
    screen: MisStack,
  },
  Logout: {
    screen: Logout,
  },
},
  {
    initialRouteName: 'Dashboard',
    contentComponent: CustomDrawerContentComponent,
    contentOptions: {
      activeTintColor: '#fff',
      activeBackgroundColor: '#075E54',
    }
  }
);
export default createAppContainer(
  createSwitchNavigator(
    {
      AuthLoading: AuthLoadingScreen,
      App: Drawer,
      Auth: AuthStack,
    },
    {
      initialRouteName: 'AuthLoading',
    },
  ),
);

如何将用户数据传递到import AsyncStorage from '@react-native-community/async-storage'; import Splash from './app/screens/splash'; import { Root } from 'native-base'; import Route from './app/Route/Route'; export default class App extends Component { constructor(props) { super(props); this.state = { isloggedIn: false, isLoading: true, user: {} }; } loginStatusCheck = async () => { const userToken = await AsyncStorage.getItem('@accessToken'); const user = await AsyncStorage.getItem('@userData'); let userData = JSON.parse(user); if (userToken) { this.setState({ isloggedIn: true, isLoading: false, user: userData }); } else { this.setState({ isloggedIn: false, isLoading: false }); } }; render() { return ( <Root> <Route screenProps={{ hello: "World" }}/> </Root> ); } }中存在的CustomDrawerContentComponent？使用ScreenProps发送到路由文件，但是如何访问它？它不是类组件。

Answer 1

您正在寻找这个，用于访问路线中的用户数据

this.props.screenProps

用于将数据传递到CustomDrawerContentComponent

<CustomDrawerContentComponent userData={this.props.screenProps}/>

在React Native中将道具从App.js传递到Route文件

1 个答案: