Question

我已经这样设置了StackNavigator：

const AppNavigator = StackNavigator(
    {
        Home: {
            screen: HomeScreen
        },
        Month: {
            screen: Month
        },
        Day: {
            screen: Day
        }
    },
    {
        headerMode: "screen",
        navigationOptions: {
            header: props => <CustomHeader {...props} />
        }
    }
);

我可以使用this.props.navigation.navigate("Month");

在每个屏幕上导航

但是，在我的CustomHeader中，我看不到要调用的道具navigate。我需要使用标题中的按钮navigate回到主屏幕。

  resetForm() {
    const {
      resetForm,
      clearCredentials,
      navigation
    } = this.props;

  this.props.navigation.navigate("Home");


  }

如何访问navigate道具以移至另一个屏幕？

CustomHeader全文：

import React, { Component } from "react";

import { connect } from "react-redux";
import {
  Image,
  View,
  Text,
  Modal,
  Button,
  TouchableOpacity,
  AsyncStorage,
  StyleSheet,
  Platform,
  Alert,
  TouchableHighlight
} from "react-native";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import { NavigationActions } from "react-navigation";
import {
  setYear,
  setStudent,
  setGroup,
  fetchCategories,
  resetForm,
  resetData,
  fetchEvents
} from "../actions/events";

class CustomHeader extends Component {
  constructor() {
    super();

    this.resetForm = this.resetForm.bind(this);
    this.fetchEvents = this.fetchEvents.bind(this);
    this.showAlert = this.showAlert.bind(this);
  }

  resetForm() {
    const navigateAction = NavigationActions.navigate({
      routeName: "Home",

      params: {},

      action: NavigationActions.navigate({ routeName: "Home" })
    });

    this.props.dispatch(navigateAction);
  }

  showAlert() {
    Alert.alert("Events refreshed");
  }

  fetchEvents() {
    const {
      fetchEvents,
      navigate,
      credentials: { group }
    } = this.props;
    resetData();
    fetchEvents(group);
    navigate("Month");
    this.showAlert();
  }

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this.resetForm}>
          <Image
            source={require("../img/logout.png")}
            style={{ width: 25, height: 30 }}
          />
        </TouchableOpacity>

        <TouchableOpacity onPress={this.fetchEvents}>
          <Image
            source={require("../img/refresh.png")}
            style={{ width: 20, height: 30 }}
          />
        </TouchableOpacity>
      </View>
    );
  }
}

const mapDispatchToProps = dispatch => {
  return {
    resetForm: () => dispatch(resetForm()),
    fetchEvents: id => dispatch(fetchEvents(id)),
    resetData: () => dispatch(resetData())
  };
};

const mapStateToProps = state => {
  return {
    categories: state.fetchCategories,
    isLoading: state.isLoading,
    credentials: state.setCredentials
  };
};

export default connect()(CustomHeader);

Answer 1

您必须将navigation传递给navigationOptions才能在标头组件中使用。您的AppNavigator应该是这样

const AppNavigator = StackNavigator(
{
    Home: {
        screen: HomeScreen
    },
    Month: {
        screen: Month
    },
    Day: {
        screen: Day
    }
},
{
    headerMode: "screen",
    navigationOptions: ({ navigation }) => ({
        header: props => <CustomHeader {...props} navigation={navigation}/>
    })
}
);

CustomHeader

...
resetForm() {
  const {navigation} = this.props;
  navigation.navigate("Home");
}
...

反应navigationv2，导航功能不在标题属性中

1 个答案: