react-native-router-flux问题无法让场景发生变化

时间:2017-08-01 14:34:22

标签: javascript react-native react-native-router-flux

我正在尝试添加一个按钮,以便从我的主页组件(主屏幕)访问我的设置组件(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正在运行..任何帮助将不胜感激。被困了几个小时。如果需要,我很乐意分享更多代码。谢谢!

0 个答案:

没有答案