Question

我有一个react-navigation路由器，如下所示：

const RootNavigator = createSwitchNavigator({
  App: createBottomTabNavigator({
    Home: {
      screen: HomeScreenContainer
    },
    Scan: {
      screen: DocumentScanScreenContainer
    },
    // ...
  }, {
    tabBarOptions: {
      showLabel: false,
      // ...
    }
  })
})

HomeScreenContainer和DocumentScanScreenContainer是必需的，因为react-navigation仅接受React.Component，而我的HomeScreen和DocumentScanScreen组件是Redux组件，并且正在导入它们直接导致react-navigation抛出错误。

HomeScreenContainer和DocumentScanScreenContainer是相似的，所以这里是DocumentScanScreenContainer：

import React from 'react'
import PropTypes from 'prop-types'

import DocumentScanScreen from '../../screens/DocumentScanScreen'

export default class DocumentScanScreenContainer extends React.Component {
  static propTypes = {
    navigation: PropTypes.shape.isRequired
  }

  render() {
    const { navigation } = this.props

    // Passing the navigation object to the screen so that you can call
    // this.props.navigation.navigate() from the screen.
    return (
      <DocumentScanScreen navigation={navigation} />
    )
  }
}

最后是DocumentScanScreen的简短版本：

import React from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'

class DocumentScanScreen extends React.Component {
  static propTypes = {
    token: PropTypes.string,
    navigation: PropTypes.shape.isRequired
  }

  componentDidMount() {
    const { token, navigation } = this.props
    if (token === undefined || token === null || token === 0) {
      navigation.navigate('Authentication')
    }
  }

  // ...
}

我在每个级别上都有警告，指出未定义navigation，所以好像我的DocumentScanScreenContainer没有从路由器收到navigation道具：

警告：道具类型失败：DocumentScanScreenContainer：道具类型navigation无效；它必须是一个函数，通常来自prop-types包，但已收到undefined。

我做错了吗，或者有办法将navigation道具从路由器传递到DocumentScanScreenContainer吗？

Answer 1

尝试一下：

Scan: {
  screen: (props) => <DocumentScanScreenContainer {...props} />
},

*我不确定这是否行得通，但是我没有评论，因为我有<50个代表

反应导航：未定义的导航道具

1 个答案: