我正在扩展React.Component
以呈现Navigator
:
<Navigator
renderScene={this.renderScene}
navigationBar={
<NavigationBar
routeMapper={NavigationBarRouteMapper}
style={styles.navBar} **// background colour is set here**
/>
/>
并沿着导航器对象传递正在渲染的场景:
renderScene = (route, navigator) => {
if(route.maps) {
return <MapView navigator={navigator} />;
}
return <LoginScreen navigator={navigator} />;
}
和MapView
看起来像这样:
type Props = {
navigator: Navigator;
}
class BTMapView extends React.Component {
props: Props;
constructor(props: Props) {
super(props);
...
}
}
现在我可以使用this.props.navigator
引用导航器对象,如何使用它来通过命令式API调用覆盖其导航栏的背景颜色?
解决方案:
class BTNavigator extends React.Component {
constructor(props) {
super(props);
this.state = {
navBarStyle: styles.navBar,
};
}
render() {
return (
<Navigator
style={styles.container}
initialRoute={{}}
renderScene={this.renderScene}
navigationBar={
<NavigationBar
routeMapper={NavigationBarRouteMapper}
style={this.state.navBarStyle}
/>
}
/>
);
}
renderScene = (route, navigator) => {
...
// pass both navigator and a reference to this
return <LoginScreen navigator={navigator} btNavigator={this} />
}
setNavBarStyle(style) {
this.setState({
navBarStyle: style,
});
}
}
现在使用navigator
和btNavigator
:
type Props = {
navigator: Navigator,
btNavigator: BTNavigator,
};
class LoginScreen extends React.Component {
props: Props;
foo() {
this.props.btNavigator.setNavBarStyle({
backgroundColor: 'black',
});
this.props.navigator.push({
...
})
}
}
答案 0 :(得分:1)
首先制作将存储NavigatorWrapper
的{{1}}类以及其他一些状态和方法,例如。
Navigator
在setNavBarRed() {
this.setState({navBarColor: 'red'});
}
方法渲染render()
中,就像您上面写的那样,并附加Navigator
样式的检查。只需在样式中设置NavigationBar
。
最后,现在你可以使用你的道具:backgroundColor: this.state.navBarColor
请注意,如果您使用this.props.navigatorWrapper.setNavBarRed()
中的connect
,则需要将react-redux
参数传递给withRef
来电。