Javascript 在react native中正确导航

在理解如何在RN中正确实现导航方面有点困难。下面的代码应该足以看到当前的情况

HeaderConnected是一个带有菜单按钮的组件，它有一个自定义导航道具，可以打开抽屉菜单。但是，我认为这不是通过导航的正确方式

–问题 HeaderConnected位于Main.js中 –预期 连接到导航器上方的头部

App.js

Main.js

当然，您可以创建另一个包装器来保存Navigator和HeaderConnectioned，然后将其传递给提供者。然而，这对我不起作用

---

阅读react navigator文档后，似乎有几种方法可以解决这个问题，但不确定什么是最好的/最佳的方法。

我在最近的一个项目中遇到了这个问题，并通过构建包装解决了这个问题，正如您所说的，尝试使用以下代码：

    const mapNavigationStateParamsToProps = (SomeComponent) => {
      return class extends Component {
        static navigationOptions = SomeComponent.navigationOptions; // better use hoist-non-react-statics
        render() {
          const { navigation: { state: { params } } } = this.props
          return (
             <View style={{ flex: 1 }}>
               <HeaderConnected
                    navigate={this.props.navigation.navigate}
                />
               <SomeComponent {...params} {...this.props} />

             </View>
      )
    }
  }
}

---

我不确定这是否是最好的/最佳的方式，但它对我很有效。

等等，刚才我知道您希望组件位于导航标题上方，我认为我的代码对您没有帮助。最好不要在每个屏幕中呈现相同的组件标题。但我相信你的方法可以做到，只是在每个屏幕上呈现标题，不是吗？有点，但如果你只是想更改标题，实际上更简单，导航允许。我以为你希望标题下总是有东西，对不起。我最终使用了你的代码，因为自定义标题不是我要找的。另外，标题仅适用于StackNavigator。

export class Main extends React.PureComponent {
    static navigationOptions = {
        drawerLabel: "Main",
    };
    render() {
        return (
            <View style={styles.container}>
                <HeaderConnected
                    navigate={this.props.navigation.navigate}
                /> // <--- This should be moved above <Navigator /> in App.js
                <PostsConnected />
            </View>
        );
    }
}

    const mapNavigationStateParamsToProps = (SomeComponent) => {
      return class extends Component {
        static navigationOptions = SomeComponent.navigationOptions; // better use hoist-non-react-statics
        render() {
          const { navigation: { state: { params } } } = this.props
          return (
             <View style={{ flex: 1 }}>
               <HeaderConnected
                    navigate={this.props.navigation.navigate}
                />
               <SomeComponent {...params} {...this.props} />

             </View>
      )
    }
  }
}

export const Navigator = DrawerNavigator({
    Main: { screen: mapNavigationStateParamsToProps(Main) },
    Edit: { screen: mapNavigationStateParamsToProps(EditScreen) },
});