Реакция native-router-flux не может заставить сцену измениться

Question

Я пытаюсь добавить кнопку для доступа к своему компоненту настроек (index.js) из моего домашнего компонента (главный экран). По какой-то причине это не работает, я уже добавил разные экраны и скопировал их в качестве примера, но мне не повезло с этим. Я утроил, проверил импорт, и все они кажутся хорошими.

Вот как выглядит мой AppNavigator.js:

import React, { Component } from "react";
import { StatusBar, Platform } from "react-native";
import { connect } from "react-redux";
import { Scene, Router } from "react-native-router-flux";

import Login from "./components/common/login/";
import SignIn from "./components/common/signIn/";
import Register from "./components/common/register/";

import DriverStartupService from 
"./components/driver/startupServices";
import DriverRootView from "./components/driver/rootView";
import DriverHome from "./components/driver/home";
import RideRequest from "./components/driver/rideRequest";
import PickRider from "./components/driver/pickRider";
import StartRide from "./components/driver/startRide";
import DropOff from "./components/driver/dropOff";
import RateRider from "./components/driver/rateRider";
import Settings from "./components/driver/settings";
import { statusBarColor } from "./themes/base-theme";
import { getAppConfig } from './actions/appConfig';

const RouterWithRedux = connect()(Router);

class AppNavigator extends Component {
  static propTypes = {
   driverJwtAccessToken: React.PropTypes.string
  };

componentWillMount() {
console.log('Getting App Config');
this.props.getAppConfig();
 }

render() {
return (
  <RouterWithRedux>
    <Scene key="root">
      <Scene
        key="login"
        component={Login}
        hideNavBar
        initial={!this.props.driverJwtAccessToken ? true : false}
      />
      <Scene key="signIn" component={SignIn} />
      <Scene key="register" component={Register} />

      <Scene key="driverRootView" component={DriverRootView}>
        <Scene key="driverHome" component={DriverHome} />
        <Scene key="rideRequest" component={RideRequest} />
        <Scene key="pickRider" component={PickRider} />
        <Scene key="startRide" component={StartRide} />
        <Scene key="dropOff" component={DropOff} />
        <Scene key="rateRider" component={RateRider} />
        <Scene key="settings" component={Settings} />
      </Scene>

      <Scene
        key="driverStartupService"
        component={DriverStartupService}
        hideNavBar
        initial={this.props.driverJwtAccessToken}
      />
    </Scene>
  </RouterWithRedux>
);
}
}
  function bindAction(dispatch) {
  return {
    getAppConfig: () => dispatch(getAppConfig())
  };
}
const mapStateToProps = state => ({
  driverJwtAccessToken: state.driver.appState.jwtAccessToken
});

export default connect(mapStateToProps, bindAction)(AppNavigator);

Вот действие на мой домашний компонент (index.js):

import React, { Component } from "react";
import { connect } from "react-redux";
import {
  View,
  Platform,
  TouchableOpacity,
  Dimensions,
  BackAndroid
} from "react-native";
import {
  Content,
  Text,
  Header,
  Button,
  Icon,
  Title,
  Left,
  Right,
  Body,
  Container
} from "native-base";
import { Actions, ActionConst } from "react-native-router-flux";

import {
  changePageStatus,
  currentLocationDriver
} from "../../../actions/driver/home";
import { logOutUserAsync } from "../../../actions/common/signin";
import styles from "./styles";
import commonColor from "../../../../native-base-
theme/variables/commonColor";

const { width, height } = Dimensions.get("window");
function mapStateToProps(state) {
  return {
   tripRequest: state.driver.tripRequest,
    fname: state.driver.user.fname,
    jwtAccessToken: state.driver.appState.jwtAccessToken
  };
}
class DriverHome extends Component {
  static propTypes = {
    logOutUserAsync: React.PropTypes.func,
    jwtAccessToken: React.PropTypes.string,
    currentLocationDriver: React.PropTypes.func,
    openDrawer: React.PropTypes.func
  };
  constructor(props) {
    super(props);
    this.state = {
      flag: true
    };
  }
  handleLogOut() {
    this.props.logOutUserAsync(this.props.jwtAccessToken);
  }
  componentDidMount() {
    BackAndroid.addEventListener("hardwareBackPress", () => {
      Actions.pop();
    });
  }
  render() {
// eslint-disable-line class-methods-use-this
return (
  <Container>
    <Header
      androidStatusBarColor={commonColor.statusBarColorDark}
      style={styles.iosHeader}
      iosBarStyle="light-content"
    >
      <Left>
        <Button transparent>
          <Icon
            name="ios-power"
            style={styles.logoutLogo}
            onPress={() => this.handleLogOut()}
          />
        </Button>
      </Left>
      <Body>
        <Title
          style={
            Platform.OS === "ios"
              ? styles.iosHeaderTitle
              : styles.aHeaderTitle
          }
        >
          Hero Home
        </Title>
      </Body>
      <Right>
        <Button transparent onPress={() => {
             console.log('settings button')
            Actions.settings()}}>
          <Icon
            name="ios-settings"
            style={styles.logoutLogo}
             />
        </Button> 
      </Right>
    </Header>
    <Content />
    <View style={styles.detailsContainer}>
      <Text style={styles.place}>
        Please wait for a Patient request...
      </Text>
    </View>
    <View
      style={{
        flex: 10,
        flexDirection: "row",
        alignItems: "flex-end",
        justifyContent: "flex-end",
        marginRight: 5,
        marginTop: height - 150,
        marginLeft: width - 40
      }}
    >
      <TouchableOpacity
        style={{ flexDirection: "row" }}
        onPress={() => this.props.currentLocationDriver()}
      >
        <Icon name="ios-locate-outline" style={{ fontSize: 40, backgroundColor: 'transparent' }} />
      </TouchableOpacity>
    </View>
  </Container>
    );
  }
}
  function bindActions(dispatch) {
  return {
     openDrawer: () => dispatch(openDrawer()),
    changePageStatus: newPage => dispatch(changePageStatus(newPage)),
    logOutUserAsync: jwtAccessToken =>
      dispatch(logOutUserAsync(jwtAccessToken)),
    currentLocationDriver: () => dispatch(currentLocationDriver())
  };
}
export default connect(mapStateToProps, bindActions)(DriverHome);

Я вижу сообщение console.log в моем терминале, поэтому я знаю, что onPress работает. Любая помощь будет принята с благодарностью. Застрял на несколько часов. Я был бы рад поделиться большим количеством кода, если это необходимо. Спасибо!