在本机反应中正确导航

Proper navigation in react-native

在理解如何在 RN 中正确实现导航方面遇到了一些困难。下面的代码应该足以看出现在的情况了

HeaderConnected 是一个带有菜单按钮的组件,它有一个自定义的导航道具,可以打开抽屉菜单 (但是,我认为这不是传递 navigate).

– 问题
HeaderConnectedMain.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 文档后,似乎有几种方法可以解决这个问题,唉,不确定 best/optimal 方法是什么。

我在最近的一个项目中遇到了这个问题,并按照您所说的那样通过构建包装器解决了这个问题,请尝试使用此代码:

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

我不确定这是否是 best/optimal 方式,但它对我有用。