访问导航道具 - react-navigation

时间:2017-11-16 07:38:14

标签: react-native react-navigation

我刚才有一个关于反应导航的问题。

据我所知,当从stacknavigator渲染屏幕时,可以访问导航道具。

但是如果stacknavigator没有呈现屏幕,你如何访问导航道具?

像这样:



import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
  StyleSheet,
  Text,
  View,
} from 'react-native';

import Swiper from 'react-native-swiper';

import Menu from './Menu';

class HomeSwiper extends Component {
    static propTypes = {
      navigation: PropTypes.object,
    };

render() {
  return (
    <Swiper showsButtons> 
      <View>
        <Menu
          navigationProps={this.props.navigation}
        />
      </View>
      <View>
        <Text>Hello Swiper</Text>
      </View>
    </Swiper>
  );
}
}


export default HomeSwiper;
&#13;
&#13;
&#13;

其中菜单是:

&#13;
&#13;
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { AsyncStorage, TouchableOpacity, Text, BackHandler, Alert } from 'react-native';

import { StandardContainerIOS } from '../components/Container';
import { StandardButton } from '../components/Buttons/';

class Menu extends Component {
  static propTypes = {
    navigation: PropTypes.object,
  };


  static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state;
    const headerLeft = (
      <TouchableOpacity
        onPress={params.handleRedirect ? params.handleRedirect : () => null}
      >
        <Text>Logout</Text>
      </TouchableOpacity>
    );
    return {
      headerLeft,
    };
  };

  constructor(props) {
    super(props);
    this.state = {
      email: '',
      petName: [],
      numberOfPets: '',
    };
  }

  getInitialState() {
    return {
      petName: ['No Name'],
    };
  }

  async componentWillMount() {
    try {
      const value = await AsyncStorage.getItem('email');
      if (value !== null) {
        // We have data!!
      }
    } catch (error) {
      // Error retrieving data
    }
    this.props.navigation.setParams({
      handleRedirect: this.handlePressLogout,
    });
    this.getEmail();
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
  }

  componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
  }

render() {
  return (
    <StandardContainerIOS>
      <StandardButton backgroundColor="#6D4C41" title="View Pet" onPress={this.handleIndexView} />
      <StandardButton backgroundColor="#6D4C41" title="Register Pet" onPress={this.handlePressRegisterPets} />
      <StandardButton backgroundColor="#6D4C41" title="Logout" onPress={this.handlePressLogout} />
    </StandardContainerIOS>
  );
}
}

export default Menu;
&#13;
&#13;
&#13;

我已删除了其他功能定义,以便将帖子缩短一点。从stacknavigator渲染时,菜单屏幕工作正常。我试图在我的应用程序中加入滑动。

有什么建议吗?

0 个答案:

没有答案