Question

我只是React Native的新手。我做了一个登录屏幕和一个登录屏幕。我的用户名和密码从webAPI获取令牌，并从webAPI将数据打印到“登录”屏幕。

现在，我要准备一个抽屉式导航。我需要将令牌从下面的代码发送到Loggedin屏幕：

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { Button, Loading } from '../components/common';
import axios from 'axios';
import { Container, Content, Icon, Header, Body } from 'native-base'
import { DrawerNavigator, DrawerItems, SafeAreaView } from 'react-navigation'
import Logged from './LoggedIn'
import Home from './HomeScreen'
import DeviceStroge from '../services/deviceStorage'



class DrawerNavigationScreen extends Component {
  constructor(props) {
    super(props);
    console.log(this.props.jwt)
    this.state = {
      loading: true,

      email: '',
      error: ''
    }
  }

  render() {
    return (
      <CustomDrawer />
    );
  }
}



const CustomDrawer = DrawerNavigator({
  Loggedin: { screen:(props)=>  <Logged {...props} myjwt={this.props.jwt}/> },
  Test: { screen: Home }

}, {
    initialRouteName: 'Loggedin',
    drawerPosition: 'right',
    drawerOpenRoute: 'DrawerOpen',
    drawerCloseRoute: 'DrawerClose',
    drawerToggleRoute: 'DrawerToggle'
  }
)

export default DrawerNavigationScreen;

'jwt'是一个保留令牌的字符串。我可以在控制台中看到令牌，但是它会抛出

无法读取未定义的属性'jwt'。

这可能是由于DrawerNavigator属性。我在做什么错了？

Answer 1

您正在尝试访问DrawerNavigationScreen的属性：由于CustomDrawer是在组件类之外定义的，因此它无法访问props或{{1} }。

选项1 ：您可以尝试像这样在呈现功能中移动state的使用：

DrawerNavigator()

选项2 ：一种更简洁的选择是使class DrawerNavigationScreen extends Component { constructor(props) { super(props); console.log(this.props.jwt) this.state = { loading: true, email: '', error: '' } } render() { return DrawerNavigator({ Loggedin: { screen:(props)=> <Logged {...props} myjwt={this.props.jwt}/> }, Test: { screen: Home } }, { initialRouteName: 'Loggedin', drawerPosition: 'right', drawerOpenRoute: 'DrawerOpen', drawerCloseRoute: 'DrawerClose', drawerToggleRoute: 'DrawerToggle' }); } }成为接受参数CustomDrawer的函数：

jwt

然后必须在渲染函数中传递const CustomDrawer = (jwt) => DrawerNavigator({ Loggedin: { screen:(props)=> <Logged {...props} myjwt={jwt}/> }, Test: { screen: Home } }, { initialRouteName: 'Loggedin', drawerPosition: 'right', drawerOpenRoute: 'DrawerOpen', drawerCloseRoute: 'DrawerClose', drawerToggleRoute: 'DrawerToggle' });作为道具：

jwt

未定义React Native props.value

1 个答案: