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