React Native props.value 未定义答案

【问题标题】：React Native props.value is not definedReact Native props.value 未定义
【发布时间】：2018-10-06 02:33:20
【问题描述】：

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

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

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

【问题讨论】：

标签： react-native navigation-drawer

【解决方案1】：

您正在尝试在其外部访问DrawerNavigationScreen 的道具：由于CustomDrawer 是在组件类外部定义的，因此它无法访问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 作为道具传递：

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

【讨论】：