title: Access the state from another component/class in navigationOptions
body: <p>I have a component for the Homescreen called <code>Root</code></p>
  
  <pre><code>  export default class Root extends Component {
  
    constructor(props) {
      super(props);
      this.state = {
        temp: 0,
        weather: "Default"
      }
    }
  
  render() {
      return(
          &lt;Icon
            style={styles.settings}
            name="md-more"
            color="white"
            size={30}
            type="ionicon"
            underlayColor={weather[this.state.weather].BackgroundColor}
            onPress={() =&gt; this.props.navigation.navigate("Settings", {weather:this.state.weather})}
            /&gt; // tried passing props down here, but don't know how
  );
  </code></pre>
  
  <p>}</p>
  
  <p><code>Root</code> has a state with fields for temp and weather, and I want to access <code>weather</code> in another component that I have, called <code>Settings</code> (for the Settings page of this app) </p>
  
  <pre><code>class Settings extends Component {
  
  static navigationOptions = {
      title: 'Home',
      headerStyle: {
        backgroundColor: weather[this.state.weather].BackgroundColor // this part
      }
    };
  </code></pre>
  
  <p>I want to access the <code>weather</code> field in Settings in the <code>backgroundColor</code> part of <code>navigationOptions</code> (using react-navigation). I've heard of passing down props to do so in other posts, but can't seem to get it working here. </p>
  
  <p>Also, the way <code>Root</code> is connected to <code>Settings</code> is through an Icon press (like a button), which I do with the following: <code>onPress={() =&gt; this.props.navigation.navigate("Settings")}</code>. So I don't think I can render Settings through Root, but is there a way to send props down here?</p>
  
  <p>(Example, if <code>this.state.weather = "Rain"</code>, then <code>weather["Rain"].backgroundColor</code> would return <code>blue</code>.)</p>