将 React Navigation 传递给子组件的子组件

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

如果navigation要从不属于 的组件访问对象，请将该组件navigator包装在withNavigationHOC 中。在包装的组件中，您可以使用 访问导航this.props.navigation。看一下官方文档

样本

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

export default withNavigation(CustomButton);

希望这会有所帮助！