Question

我有一个应用程序，我希望将图像列表显示为网格，列表中的第一个元素是＆＃34;添加＆＃34; - 按钮。我还需要每个图像都可以触摸。目前我的代码如下所示：

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函数不起作用，因为在for循环中看不到this。

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

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

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

Answer 1

如果您目前唯一遇到的问题与范围相关，则最好通过为处理map的{{1}}函数指定范围来更正此问题。但是，我发现有几个其他问题要对您的代码发表评论。

您的this.state.data函数正在通过itemPicker函数直接改变您的状态。选择使用push之类的函数，它将返回一个新数组（或扩展运算符）。请参阅docs，了解为什么不应该直接改变这样的状态。
确保为您正在创建的concat项目添加唯一的key（请参阅React发出的警告）

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

TouchableOpacity

Answer 2

尝试使用箭头功能：

{this.state.data.map((item) => {
    // your code
})}

或者您可以使用bind：

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

两个解决方案的作用是将this参数传递到循环内部。

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

2 个答案: