Question

包装

npm install --save react-native-calendar-select

源代码：

import React, { Component } from 'react';
import ActionButton from 'react-native-action-button';
import Icon from 'react-native-vector-icons/Ionicons';
import { StyleSheet, Text, View } from 'react-native';
import Calendar from 'react-native-calendar-select';


class YourComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            startDate: new Date(2017, 6, 12),
            endDate: new Date(2017, 8, 2)
        };
        this.confirmDate = this.confirmDate.bind(this);
        this.openCalendar = this.openCalendar.bind(this);
    }
    // when confirm button is clicked, an object is conveyed to outer component
    // contains following property:
    // startDate [Date Object], endDate [Date Object]
    // startMoment [Moment Object], endMoment [Moment Object]
    confirmDate({ startDate, endDate, startMoment, endMoment }) {
        this.setState({
            startDate,
            endDate
        });
    }
    openCalendar() {
        this.calendar && this.calendar.open();
    }
    // in render function
    render() {
        // It's an optional property, I use this to show the structure of customI18n object.
        let customI18n = {
            'w': ['', 'Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'],
            'weekday': ['', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
            'text': {
                'start': 'Check in',
                'end': 'Check out',
                'date': 'Date',
                'save': 'Confirm',
                'clear': 'Reset'
            },
            'date': 'DD / MM'  // date format
        };
        // optional property, too.
        let color = {
            subColor: '#f0f0f0'
        };
        return (
            <View>
                <Button title="Open Calendar" onPress={this.openCalendar} />
                <Calendar
                    i18n="en"
                    ref={(calendar) => { this.calendar = calendar; }}
                    customI18n={customI18n}
                    color={color}
                    format="YYYYMMDD"
                    minDate="20170510"
                    maxDate="20180312"
                    startDate={this.state.startDate}
                    endDate={this.state.endDate}
                    onConfirm={this.confirmDate}
                />
            </View>
        );
    }

运行时出现此错误这是网站上的原始代码，我找不到问题所在

这是一个日历日期选择器，我从npm website复制了原始代码，并将代码放在了类class组件中


请您能帮我修复它！

Answer 1

您遇到语法错误，因为您缺少最后一个'}'。只需检查您的代码即可：您打开并关闭了render方法，但是您的类仍然处于打开状态。

您也可以导入ActionButton，而仅使用Button。

完整代码应如下所示：

import React, { Component } from 'react';

import ActionButton from 'react-native-action-button';
import Icon from 'react-native-vector-icons/Ionicons';
import { StyleSheet, Text, View } from 'react-native';
import Calendar from 'react-native-calendar-select';


class YourComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: new Date(2017, 6, 12),
      endDate: new Date(2017, 8, 2)
    };
    this.confirmDate = this.confirmDate.bind(this);
    this.openCalendar = this.openCalendar.bind(this);
  }

  // when confirm button is clicked, an object is conveyed to outer component
  // contains following property:
  // startDate [Date Object], endDate [Date Object]
  // startMoment [Moment Object], endMoment [Moment Object]
  confirmDate({startDate, endDate, startMoment, endMoment}) {
    this.setState({
      startDate,
      endDate
    });
  }

  openCalendar() {
    this.calendar && this.calendar.open();
  }

  // in render function
  render() {
    // It's an optional property, I use this to show the structure of customI18n object.
    let customI18n = {
      'w': ['', 'Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'],
      'weekday': ['', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
      'text': {
        'start': 'Check in',
        'end': 'Check out',
        'date': 'Date',
        'save': 'Confirm',
        'clear': 'Reset'
      },
      'date': 'DD / MM'  // date format
    };
    // optional property, too.
    let color = {
      subColor: '#f0f0f0'
    };
    return (
      <View>
        <ActionButton
          buttonColor="rgba(231,76,60,1)"
          onPress={this.openCalendar}
        />
        <Calendar
          i18n="en"
          ref={(calendar) => {this.calendar = calendar;}}
          customI18n={customI18n}
          color={color}
          format="YYYYMMDD"
          minDate="20170510"
          maxDate="20180312"
          startDate={this.state.startDate}
          endDate={this.state.endDate}
          onConfirm={this.confirmDate}
        />
      </View>
    );
  }
}

Answer 2

这是两个错误的地方，首先，您不导入Button，其次，您复制了示例代码，但它没有显示所有代码，仅显示了构造函数和渲染，因此请尝试以下代码。

import React, { Component } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import Calendar from 'react-native-calendar-select';


class YourComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            startDate: new Date(2017, 6, 12),
            endDate: new Date(2017, 8, 2)
        };
        this.confirmDate = this.confirmDate.bind(this);
        this.openCalendar = this.openCalendar.bind(this);
    }
    // when confirm button is clicked, an object is conveyed to outer component
    // contains following property:
    // startDate [Date Object], endDate [Date Object]
    // startMoment [Moment Object], endMoment [Moment Object]
    confirmDate({ startDate, endDate, startMoment, endMoment }) {
        this.setState({
            startDate,
            endDate
        });
    }
    openCalendar() {
        this.calendar && this.calendar.open();
    }
    // in render function
    render() {
        // It's an optional property, I use this to show the structure of customI18n object.
        let customI18n = {
            'w': ['', 'Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'],
            'weekday': ['', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
            'text': {
                'start': 'Check in',
                'end': 'Check out',
                'date': 'Date',
                'save': 'Confirm',
                'clear': 'Reset'
            },
            'date': 'DD / MM'  // date format
        };
        // optional property, too.
        let color = {
            subColor: '#f0f0f0'
        };
        return (
            <View>
                <Button title="Open Calendar" onPress={this.openCalendar} />
                <Calendar
                    i18n="en"
                    ref={(calendar) => { this.calendar = calendar; }}
                    customI18n={customI18n}
                    color={color}
                    format="YYYYMMDD"
                    minDate="20170510"
                    maxDate="20180312"
                    startDate={this.state.startDate}
                    endDate={this.state.endDate}
                    onConfirm={this.confirmDate}
                />
            </View>
        );
    }
}

Answer 3

当您错过结尾括号或多余的括号时，会产生此类型的错误，因此请按ctrl + shift + f在可视代码中设置代码格式以查看缺少的括号。

视图中的意外令牌本机反应

3 个答案: