在本机反应中正确导航
Proper navigation in react-native
在理解如何在 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 文档后,似乎有几种方法可以解决这个问题,唉,不确定 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 方式,但它对我有用。
在理解如何在 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 文档后,似乎有几种方法可以解决这个问题,唉,不确定 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 方式,但它对我有用。