Question

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

所以基本上我是通过数组数组来构建每一行，并在行内，映射每个数组以构建每个按钮。因为需要在按钮中设置onPress，所以我传递了每个的URL `onPress {（）=＆gt; this.props.navigation.navigate（{navigationURL}）

作为道具，首先是行，然后是按钮。问题是我一直收到错误'无法读取未定义的属性'导航'。我确定这是因为只有导航器中的实际“屏幕”才能访问导航道具。我也试过传递

 navigation={this.props.navigation}

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

Answer 1

如果要从不属于navigation的组件访问navigator对象，请将该组件包装在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

啊，愚蠢的错误。我没有在构造函数中设置Props。感谢您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导航传递给子组件的子组件

2 个答案: