реагировать на родной - Обратный вызов в компоненте с «типами проп» - PullRequest
Новая
       13

реагировать на родной - Обратный вызов в компоненте с «типами проп»

0 голосов
/ 29 мая 2018

У меня есть компонент Gallery, например: 

import React from 'react';
... Some import
import PropTypes from 'prop-types';
import {
    TouchableOpacity,
    Image,
    FlatList
} from 'react-native';

export default class Gallery extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selected: 0,
            data: this.props.data
        }
    }
    render() {
        return (
            <FlatList
                showsHorizontalScrollIndicator={false}
                horizontal={true}
                data={this.state.data}
                keyExtractor={(item, index) => item.id}
                renderItem={({item, index}) =>
                    <TouchableOpacity
                        disabled={this.props.overlay && this.state.selected==index}
                        // onPress={this.props.actionOnPress}
                        onPress={()=>{
                            if(this.props.overlay) {
                                this.setState({
                                    selected: index,
                                    data: [...this.props.data]
                                });
                            }
                            this.props.actionOnPress;
                        }}>
                        <Image
                            source={{uri: item.imageUrl}}
                            style={[gallery.galleryItem, this.props.overlay && this.state.selected!=index ?gallery.overlay :  null,
                            index==0 ? gallery.firstGalleryItem : ( index+1 == Object.keys(this.props.data).length ? gallery.lastGalleryItem : null )]}/>
                    </TouchableOpacity>
                }
            />
        );
    }
}
Gallery.propTypes = {
    data: PropTypes.array,
    actionOnPress: PropTypes.func,
    overlay: PropTypes.bool
}

, и я использовал компонент Gallery, например 

import React from 'react';
import common from '../../assets/styles/common/common'
import galleryPreview from '../../assets/styles/common/galleryPreview'
import icons from '../../assets/styles/common/icon'
import Icons from '../../config/ConstantIcon'
import Gallery from '../common/Gallery'
import {
    View,
    Text,
    StatusBar,
    TouchableOpacity,
    Image
} from 'react-native';

const data = [ List item here];

export default class GalleryPreview extends React.Component {   
    render() {
        return (
            <View>
                ... Some code here

                    <Gallery data={data} overlay={true}/>

                ... Some code here
            </View>
        );
    }
}

Как использовать обратный вызов из компонента Gallery, например <Gallery data={data} actionOnPress={({item, index})=> console.log(item)}/>.item и index будут получены из компонента Gallery.

Я использовал onPress={this.props.actionOnPress}, но не могу вставить 

if(this.props.overlay) {
    this.setState({
        selected: index,
        data: [...this.props.data]
    });
}

, а не параметр обратного вызова item и index

вы, ребята, можете мне помочь?

спасибо,

1 Ответ

0 голосов
/ 29 мая 2018

Просто вызовите функцию с аргументами: 

onPress={() => {
  ...
  this.props.actionOnPress({ item, index });
}}
...