this.onPressItem不是map中的函数

时间:2017-03-10 18:04:04

标签: reactjs typescript react-native typescript-typings

我需要帮助反应原生(使用的打字稿)。 我maping状态,并调用onpress函数,但不工作。 我不知道这个我真的需要帮助。 0000000000000000000000000000000000000000000000000000000

ERROR

this.onPressItem is not a function

CODE

import React, { Component } from 'react';
import ReactNative from 'react-native';
import { styles } from './labsoft/labsoft.ui';

const _ = require('lodash');
var _TabsScrollPage: any;
const tabbarTabsScroll = ReactNative.StyleSheet.flatten(styles.tabbarTabsScroll);
const labelTabsScroll = ReactNative.StyleSheet.flatten(styles.labelTabsScroll);
const spacingLabel = ReactNative.StyleSheet.flatten(styles.spacingLabelTabsScroll)
const spacingLabelActive = ReactNative.StyleSheet.flatten(styles.spacingLabelActiveTabsScroll)

export interface itemsTabsScrollProperties {
    app?: any; // this is required in view
    currentPage?: any;
    pages?: any
}

export interface itemsTabsScrollState {
    app?: any; // this is required in view
    currentPage?: any;
    pages?: any;
}


export default class ItemsTabsScrollPage extends Component<itemsTabsScrollProperties, itemsTabsScrollState> {

constructor(props: itemsTabsScrollProperties) {
    super(props);

    _TabsScrollPage = props.app;
    this.state = {
        currentPage: this.props.currentPage,
        pages: [
            { name: this.props.pages.name }
        ]
    }


}

get currentPage() { return this.state.currentPage }
set currentPage(value) { this.setState({ currentPage: value }) }

onPressItem(key: number) {
    console.log("key", key)
    this.setState({ currentPage: key })
    _TabsScrollPage.navigateTo();
}
private _current: any;

render() {
    this._current = this.state.currentPage
    console.log(this._current)
    return (
        <ReactNative.ScrollView horizontal={true} showsHorizontalScrollIndicator={false} decelerationRate="fast">
            <ReactNative.View style={tabbarTabsScroll}>
                {

                    this.props.pages.map(function (value: any, i: any) {
                        return (
                            <ReactNative.TouchableOpacity key={i} onPress={this.onPressItem(i)} style={this._current === i ? spacingLabelActive : spacingLabel}>
                                <ReactNative.Text style={labelTabsScroll}>{value.name}</ReactNative.Text>
                            </ReactNative.TouchableOpacity>)
                    })
                }

            </ReactNative.View>
        </ReactNative.ScrollView >

    );
}
}

1 个答案:

答案 0 :(得分:1)

使用箭头功能允许this指向组件。变化:

this.props.pages.map(function (value: any, i: any) {

this.props.pages.map((value: any, i: any) => {