react-native - 在不使用 Flatlist 的情况下，在本机反应中呈现可变数量的项目 n（在我的示例中为 2）

Question

我有一个使用 ScrollView 的案例。

我从 api 收到 n 个 paymentMediums，我需要每行渲染 2 个。

使用 Flatlist 这很简单，我已经实现为

                                   <FlatList
                                    scrollEnabled={false}
                                    numColumns={2}
                                    data={this.state.paymentMediums}
                                    keyExtractor={item => String(item.paymentMasterIdentifier)}
                                    renderItem={({ item, index }) => (
                                        <TouchableOpacity

                                            key={item.paymentMasterIdentifier}
                                            onPress={() => this.setState({ selectedPaymentMedium: item.paymentMasterIdentifier, selectedPaymentMediumName: item.paymentMethodName })}
                                            style={[styles.checkboxView, { marginBottom: 10, width: (width - 32) / 2, alignSelf: 'center' }]}>

                                            <View style={{ borderRadius: 10, borderWidth: 3, borderColor: this.state.selectedPaymentMedium == item.paymentMasterIdentifier ? MyColors.COLOR_ACCENT : '#F1D3C3' }}>
                                                <Image
                                                    resizeMode="contain"
                                                    style={styles.paymentImage}
                                                    source={{ uri: item.imageUrl }}
                                                />
                                            </View>
                                            <Text style={{ color: this.state.selectedPaymentMedium == item.paymentMasterIdentifier ? MyColors.COLOR_ACCENT : '#7A7A7A' }}>{item.paymentMethodName}</Text>
                                        </TouchableOpacity>
                                    )}
                                /> 

然而，这给出了明显的警告virtualized list should never be nested inside plain scrollview。所以，我需要在没有平面列表的情况下以正常方式呈现它们。

我试过了， {this.renderPaymentMediums()}在 render() 里面

 renderPaymentMediums() {
    let paymentMediums = this.state.paymentMediums;
    console.log('incoming', paymentMediums.length)
    
    for (let index = 0; index < paymentMediums.length; index += 2) {
        return (<View style={{}}>
            {     this.renderEachPaymentMediums(paymentMediums[index], paymentMediums[index + 1] ? paymentMediums[index + 1] : null)
            }
        </View>)
    }
}


renderEachPaymentMediums = (item, item2 = null) => {
    return (
        <View style={{ flexDirection: 'row', flex: 1, marginBottom: 10 }}>
            <View style={{ alignItems: 'center' }}>
                <TouchableOpacity

                    key={item.paymentMasterIdentifier}
                    onPress={() => this.setState({ selectedPaymentMedium: item.paymentMasterIdentifier, selectedPaymentMediumName: item.paymentMethodName })}
                    style={[styles.checkboxView, { width: (width - 32) / 2, }]}>

                    <View style={{ padding: 3, borderRadius: 10, borderWidth: 3, borderColor: this.state.selectedPaymentMedium == item.paymentMasterIdentifier ? MyColors.COLOR_ACCENT : '#F1D3C3' }}>
                        <Image
                            resizeMode="contain"
                            style={styles.paymentImage}
                            source={{ uri: item.imageUrl }}
                        />
                    </View>
                    <Text style={{ color: this.state.selectedPaymentMedium == item.paymentMasterIdentifier ? MyColors.COLOR_ACCENT : '#7A7A7A' }}>{item.paymentMethodName}</Text>
                </TouchableOpacity>
            </View>
            <View style={{ alignItems: 'center' }}>
                {item2 !== null && (
                    <TouchableOpacity

                        key={item2.paymentMasterIdentifier}
                        onPress={() => this.setState({ selectedPaymentMedium: item2.paymentMasterIdentifier, selectedPaymentMediumName: item2.paymentMethodName })}
                        style={[styles.checkboxView, { width: (width - 32) / 2 }]}>

                        <View style={{ padding: 3, borderRadius: 10, borderWidth: 3, borderColor: this.state.selectedPaymentMedium == item2.paymentMasterIdentifier ? MyColors.COLOR_ACCENT : '#F1D3C3' }}>
                            <Image
                                resizeMode="contain"
                                style={styles.paymentImage}
                                source={{ uri: item2.imageUrl }}
                            />
                        </View>
                        <Text style={{ color: this.state.selectedPaymentMedium == item2.paymentMasterIdentifier ? MyColors.COLOR_ACCENT : '#7A7A7A' }}>{item2.paymentMethodName}</Text>
                    </TouchableOpacity>
                )}
            </View>

        </View>

    )
}

这不起作用，因为它从循环的第一次迭代中返回并返回。

那么，我该如何进行这项工作。

另外，我想问一下在 ScrollView 中使用 Flatlists 是否会影响性能。我已禁用内部的滚动，Flatlist以便 2 个滚动行为不会重叠，因此我没有收到警告。但警告仍然存在。这一步有用吗？？

标签： react-nativereact-native-flatlistreact-native-scrollview