android - 创建具有不同回调的TouchableOpacity项目网格的最佳方法？

我有一个应用程序，我想在其中以网格形式显示图像列表，列表上的第一个元素是“添加”按钮。我还需要每个图像都是可触摸的。目前，我的代码如下所示：

class RNtest extends Component {
    constructor() {
        super();

        this.state = {
            data: [],
            counter: 0 //Used to give unique numbers to the items
        };
    }

    itemPicker() {
        var temp = this.state.data;
        temp.push({text: this.state.counter});
        this.setState({
            data: temp,
            counter: this.state.counter + 1
        });
    }

    onPress() {
        console.warn('YO!');
    }

    render()  {
        return (
            <ScrollView style={styles.body}>

                <View style={styles.section}>
                    <Text style={styles.sectionHeader}>ITEMS</Text>

                    <View style={styles.gallery}>
                        <TouchableOpacity
                            style={styles.addButton}
                            onPress={this.itemPicker.bind(this)}
                        >
                            <Text>ADD</Text>
                        </TouchableOpacity>

                        {this.state.data.map(function(item) {
                            return (
                                <TouchableOpacity
                                    style={styles.item}
                                    onPress={this.onPress.bind(this)}
                                >
                                        <Text>{item.text}</Text>
                                </TouchableOpacity>
                            );
                        })}
                    </View>
                </View>

            </ScrollView>
        );
    }

}

样式表，以防有人需要：

var styles = StyleSheet.create ({
    addButton: {
        alignItems: 'center',
        justifyContent: 'center',
        height: 72,
        width: 72,
        borderRadius: 2,
        marginVertical: 6,
        marginRight: 6,
        backgroundColor: 'white'
    },
    gallery: {
        flexDirection: 'row',
        flexWrap: 'wrap'
    },
    item: {
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#DCFFC2',
        height: 72,
        width: 72,
        borderRadius: 2,
        margin: 6
    },
    section: {
        flexDirection: 'column',
        paddingTop: 10
    },
    sectionHeader: {
        fontSize: 13,
        fontWeight: '400',
        paddingBottom: 1,
        color: '#A7A7A7'
    },
    body: {
        flex: 1,
        backgroundColor: '#EEEEEE',
        paddingVertical: 10,
        paddingHorizontal: 20
    },
});

显然onPress函数不起作用，因为显然this在for循环中不可见。

我可以使用ListView，但是在renderRow内部，我必须检查要渲染的项目是否是添加按钮，这也会使其他一些部分也变得更加困难。

我可以在这种情况下使用裁判，这是个好主意吗？

我正在Android模拟器上运行React Native 0.27.2。

最佳答案

如果您当前遇到的唯一问题是与范围相关的，则可以通过为处理map的this.state.data函数指定一个范围来最好地解决此问题。但是，我看到一些其他问题需要用您的代码进行评论。


您的itemPicker函数通过push函数直接改变状态。选择使用诸如concat之类的函数，该函数将返回一个新数组（或散布运算符）。请参阅docs，以了解为什么您不应该像这样直接改变状态的原因。
确保在要创建的结果key项目中添加唯一的TouchableOpacity（请参见React的警告）


我已经修改了您的代码示例以演示这些概念：

import React, { Component } from 'react';
import {
    ScrollView,
    StyleSheet,
    Text,
    TouchableOpacity,
    View
} from 'react-native';

class RNTest extends Component {
    constructor(props) {
        super(props);

        this.state = {
            data: [],
            counter: 0
        };
    }

    itemPicker() {
        // 'push' will mutate, concat will return a new array
        this.setState({
            data: this.state.data.concat({text: this.state.counter}),
            counter: this.state.counter + 1
        });
    }

    createButton (item, index) {
        // add a unique key, per react warnings
        return (
            <TouchableOpacity
                key={index}
                style={styles.item}
                onPress={this.onPress}>
                    <Text>{item.text}</Text>
            </TouchableOpacity>
        );
    }

    onPress() {
        console.warn('YO!');
    }

    render()  {
        return (
            <ScrollView style={styles.body}>

                <View style={styles.section}>
                    <Text style={styles.sectionHeader}>ITEMS</Text>

                    <View style={styles.gallery}>
                        <TouchableOpacity
                            style={styles.addButton}
                            onPress={this.itemPicker.bind(this)}
                        >
                            <Text>ADD</Text>
                        </TouchableOpacity>

                        {this.state.data.map(this.createButton, this)}
                    </View>
                </View>

            </ScrollView>
        );
    }

}

export default RNTest;

关于android - 创建具有不同回调的TouchableOpacity项目网格的最佳方法？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37923578/