更改React Navigator对象的背景颜色

Question

我正在扩展 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引用导航器对象，如何使用它来覆盖其导航栏的背景颜色？

解决方案：

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({
      ...
    })
  }
}

Answer 1

首先制作NavigatorWrapper类，该类将存储Navigator，以及一些其他状态和方法，例如

setNavBarRed() {
    this.setState({navBarColor: 'red'});
}

在render()中，方法渲染Navigator就像您在上面写的NavigationBar样式的其他检查一样。只需将backgroundColor: this.state.navBarColor设置为样式。

最后，现在您可以使用您的道具：this.props.navigatorWrapper.setNavBarRed()

请注意，如果您在react-redux使用connect，则需要将withRef参数传递给connect调用。