Question

我有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 data={data} actionOnPress={({item, index})=> console.log(item)}/>这样的Gallery组件的回调。将从Gallery组件获取item和index。

我使用了onPress={this.props.actionOnPress}，但我无法插入

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

而不是回调参数item和index

你能帮助我吗？

感谢，

Answer 1

只需使用参数调用该函数：

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

本机反应 - 使用＆＃39; prop-types＆＃39;组件回调。

1 个答案: