使用bind()时如何导航其他组件?

时间:2018-05-15 14:28:01

标签: react-native react-navigation

我使用react-navigation导航其他组件。

现在我希望navigate使用某些参数(selectedCityfirstSliderValuesecondSliderValue)到其他组件,但onAccept()函数会收到错误< / p>

TypeError: Cannot read property 'bind' of undefined 

当我之前添加了参数时,我可以navigate到我的MovieClostTime组件。为什么我不能添加参数?我该怎么办?

任何帮助将不胜感激。提前谢谢。

以下是我的代码部分:

    constructor(props) {
        super(props);
        this.state = { 
          showModal: false, 
          selectedCity: 'Keelung',
          firstSliderValue: 18,
          secondSliderValue: 21
        };
      }
      // it will close <Confirm /> and navigate to MovieCloseTime component
      onAccept() {
        this.setState({ showModal: !this.state.showModal });
        const { selectedCity, firstSliderValue, secondSliderValue } = this.state;
        console.log(selectedCity); // Keelung
        console.log(firstSliderValue);  // 18
        console.log(secondSliderValue); // 21
        this.props.navigation.navigate('MovieCloseTime', {
          selectedCity,
          firstSliderValue,
          secondSliderValue
        });
      }

  // close the Confirm
  onDecline() {
    this.setState({ showModal: false });   
  }

    render() {
        if (!this.state.isReady) {
          return <Expo.AppLoading />;
        }
        const movies = this.state.movies;
        console.log('render FirestScrren');
        return (
          <View style={{ flex: 1 }}> 
            {/* Other View */}
            {/* <Confirm /> is react-native <Modal />*/}
            <Confirm
              visible={this.state.showModal}
              onAccept={this.onAccept.bind(this)}
              onDecline={this.onDecline.bind(this)}
              onChangeValues={this.onChangeValues}
            >
            </Confirm>      
          </View>
        );
      }

我的Confirm.js

import React from 'react';
import { Text, View, Modal } from 'react-native';
import { DropDownMenu } from '@shoutem/ui';
import TestConfirm from './TestConfirm';
import { CardSection } from './CardSection';
import { Button } from './Button';
import { ConfirmButton } from './ConfirmButton';

const Confirm = ({ children, visible, onAccept, onDecline, onChangeValues }) => {

  const { containerStyle, textStyle, cardSectionStyle } = styles;

  return (
    <Modal
      visible={visible}
      transparent
      animationType="slide"
      onRequestClose={() => {}}
    >
      <View style={containerStyle}>
        <CardSection style={cardSectionStyle}>
          <TestConfirm onChangeValues={onChangeValues} />
          {/* <Text style={textStyle}>
            {children}
          </Text> */}
        </CardSection>

        <CardSection>
          <ConfirmButton onPress={onAccept}>Yes</ConfirmButton>
          <ConfirmButton onPress={onDecline}>No</ConfirmButton>
        </CardSection>
      </View>
    </Modal>
  );
};

const styles = {
  // some style
};

export { Confirm };

0 个答案:

没有答案