React native 在react native中通过道具从App.js路由文件_React Native_React Navigation

React native 在react native中通过道具从App.js路由文件

react-native

React native 在react native中通过道具从App.js路由文件,react-native,react-navigation,React Native,React Navigation,我必须在我的应用程序中显示已登录的用户。我可以在App.js中获取用户信息，需要将用户数据传递到Route.js。我在另一个文件中设置了路由。我已将我的路线设置为 import { createAppContainer, createSwitchNavigator } from 'react-navigation'; import { createStackNavigator } from 'react-navigation-stack'; import { createDrawerNavig

我必须在我的应用程序中显示已登录的用户。我可以在

App.js

中获取用户信息，需要将用户数据传递到

Route.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',
    },
  ),
);

从“反应导航”导入{createAppContainer，createSwitchNavigator}；
从“反应导航堆栈”导入{createStackNavigator}；
从“react navigation drawer”导入{createDrawerNavigator，DrawerItems}；
从“反应本机矢量图标/FontAwesome”导入图标；
//屏风
从“../screens/Login”导入登录名；
从“../screens/Logout”导入注销；
从“../screens/activity”导入活动；
从“../screens/addActivity”导入addActivity；
从“../screens/authLoading”导入AuthLoadingScreen；
从“../screens/organization”导入OrganizationScreen；
从“../screens/contact”导入ContactScreen；
从“../screens/AllContact”导入AllContact；
从“../screens/ContactAdd”导入ContactAdd；
从“../screens/OrganizationAdd”导入OrganizationAdd；
从“../screens/DealForm”导入DealForm；
从“../screens/MyDeals”导入MyDeals；
从“../screens/Mis”导入Mis；
从“../screens/Misgraph”导入Misgraph；
从“../screens/Deals”导入交易；
从“../screens/Dashboard”导入仪表板；
从“../screens/AddTarget”导入AddTarget；
从“../screens/AddDeal”导入AddDeal；
从“本机基”导入{容器、标题、正文、内容、文本}；
export const AuthStack=createStackNavigator(
{
登记册：{
屏幕：登录，
},
},
{
headerMode:“无”，
},
);
导出常量DashboardStack=createStackNavigator(
{
仪表板：{
屏幕：仪表板，
},
添加目标：{
屏幕：AddTarget，
},
地址：{
屏幕：AddDeal，
},
},
{
initialRouteName:“仪表板”，
headerMode:“无”，
},
);
常量CustomDrawerContentComponent=（道具）=>(
)
export const Drawer=createDrawerNavigator({
仪表板：{
屏幕：仪表板堆栈，
},
交易：{
屏幕：DealForm，
},
MyDeal：{
屏幕：MyDealStack，
导航选项：{
抽屉标签：“我的交易”，
},
},
组织：{
屏幕：OrganizationStack，
},
联系人：{
屏幕：ContactStack，
},
性能：{
屏幕：错贴，
},
注销：{
屏幕：注销，
},
},
{
initialRouteName:“仪表板”，
contentComponent:CustomDrawerContentComponent，
内容选项：{
activeTintColor:“#fff”，
activeBackgroundColor:“#075E54”，
}
}
);
导出默认createAppContainer(
createSwitchNavigator(
{
AuthLoading:AuthLoadingScreen，
应用程序：抽屉，
Auth:AuthStack，
},
{
initialRouteName:“AuthLoading”，
},
),
);

和App.js作为

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

从'@react native community/async storage'导入异步存储；
从“/app/screens/Splash”导入飞溅；
从“本机基”导入{Root}；
从“./app/Route/Route”导入路由；
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
伊斯洛格丁：错，
孤岛加载：是的，
用户：{}
};
}
loginStatusCheck=async（）=>{
const userToken=await AsyncStorage.getItem（“@accessToken”）；
const user=await AsyncStorage.getItem（'@userData'）；
让userData=JSON.parse（用户）；
if（userToken）{
this.setState（{isloggedIn:true，isLoading:false，user:userData}）；
}否则{
this.setState（{isloggedIn:false，isLoading:false}）；
}
};
render（）{
返回(
);
}
}

如何将用户数据传递到

Route.js

中的

CustomDrawerContentComponent

？使用屏幕道具发送到路由文件，但如何访问它？它不是类组件。

您正在寻找它，用于访问路由中的用户数据

this.props.screenProps

用于将数据传递到CustomDrawerContentComponent

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