将 React 导航传递给子组件的子组件

Question

我正在使用子“行”和“按钮”组件动态构建我的“屏幕”。我只使用这种方法是因为我找不到可用于 react-native 的 flex-flow 属性。

所以基本上我通过数组的数组进行映射以构建每一行，并在行内通过每个数组进行映射以构建每个按钮。因为需要在按钮中设置 onPress，所以我为每个传递了 URL onPress{() => this.props.navigation.navigate({navigationURL})

作为道具，先到行，再到按钮。问题是我不断收到错误 'Cannot read property 'navigation' of undefined。我确定这是因为只有导航器中的实际“屏幕”才能访问导航道具。我也试过通过

navigation={this.props.navigation}

但没有成功。我查看了所有文档，但似乎找不到任何有用的信息。还有人遇到过类似情况吗？

Answer 1

如果您想从不属于 navigator 的组件访问 navigation 对象，则将该组件包装在 withNavigation HOC 中。在包装的组件中，您可以使用 this.props.navigation 访问导航。看看 official document

示例

import { withNavigation } from 'react-navigation';
...
class CustomButton extends React.Component {
  render() {
    return <Button title="Back" onPress={() => { 
      this.props.navigation.goBack() }} />;
    }
}

export default withNavigation(CustomButton);

希望这会有所帮助！

Answer 2

啊哈，愚蠢的错误。我没有在构造函数中设置道具。感谢 Prasun Pal 的帮助！如果其他人有问题，这是我的代码。

 import React, { Component } from 'react'
    import { Image, Text, TouchableOpacity, View } from 'react-native'
    import { withNavigation } from 'react-navigation'



    class ButtonName extends Component {

        constructor(props) {
            super(props);
            this.state = {};
          }

        render() {
            return (

                <TouchableOpacity
                    onPress={() => this.props.navigation.navigate('PageName')}
                >
                </TouchableOpacity>
            )
        }
    }

    export default withNavigation(ButtonName);

将 React 导航传递给子组件的子组件

Passing React Navigation to Child of Child Component

reactjs

react-native

react-navigation

react-props