React Native props.value 未定义

Question

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

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

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'是一个保存token的字符串。我可以在控制台中看到令牌，但它会抛出

Cannot read property 'jwt' of undefined.

这可能是因为 DrawerNavigator 属性。我做错了什么？

Answer 1

您正试图在其外部访问 DrawerNavigationScreen 的属性：由于 CustomDrawer 是在组件 class 外部定义的，因此它无法访问任何一个 props 或 state.

选项 1：您可以尝试在渲染函数中移动 DrawerNavigator() 的使用，如下所示：

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

选项 2：更简洁的替代方法是使 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 作为 prop 传递：

// From DrawerNavigationScreen component.
render() {
  return <CustomDrawer jwt={this.props.jwt}/>
}

React Native props.value 未定义

React Native props.value is not defined

navigation-drawer

react-native