Question

在理解如何在RN中正确实现导航方面有点费力。以下代码应足以查看当前情况。

HeaderConnected是一个带有菜单按钮的组件，该按钮具有自定义导航道具，可以打开抽屉菜单（但是，我认为这不是传递navigate的正确方法）

- 问题
HeaderConnected位于Main.js

- 预期
HeaderConnected高于Navigator

App.js

// ...
import { DrawerNavigator } from "react-navigation";

export const Navigator = DrawerNavigator({
    Main: { screen: Main },
    Edit: { screen: EditScreen },
});
export default class App extends React.Component {
    render() {
        return (
            <Provider store={createStore(reducer)}>
                <Navigator />
            </Provider>
        );
    }
}

Main.js

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>
        );
    }
}

当然，您可以创建另一个包装器来保存Navigator和HeaderConnected，然后将其传递给Provider。但是，这对我没有用。

阅读react-navigator文档后，似乎有几种方法可以解决这个问题，不知道什么是最佳/最佳方式。

Answer 1

我在最近的一个项目中遇到过这个问题，正如你所说的那样通过构建一个包装器来解决这个问题，尝试使用这个代码：

    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) },
});

我不确定它是否是最佳/最佳方式，但它对我有用。

反应原生的适当导航

1 个答案: