问扁平列表内部与外部的不同结果
EN

Stack Overflow用户

提问于 2019-08-05 12:50:44

回答 2查看 32关注 0票数 0

我刚接触React Native，所以我确信我只是做错了什么，或者没有完全理解扁平列表是如何工作的。

下面是我的代码：

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

class CategoryScreen extends Component {

    constructor(props) {

        super(props);

        this.state = {
            refresh: false
        };
    }

    _keyExtractor = (item, index) => index.toString();

    _renderItem = ({item, index}) => (
        <View style={ styles.testRowContainer }>
            <View style={ styles.testCategoryColumn }>
                <Text style={ styles.testCategoryText }>Test</Text>
            </View>
            <View style={ styles.testColumnContainer }>
                <Text style={ styles.testCategoryText }>[X]</Text>
            </View>
            <View style={ styles.testColumnContainer }>
                <Text style={ styles.testCategoryText }>[X]</Text>
            </View>
            <View style={ styles.testColumnContainer }>
                <Text style={ styles.testCategoryText }>[X]</Text>
            </View>
            <View style={ styles.testColumnContainer }>
                <Text style={ styles.testCategoryText }>[X]</Text>
            </View>
        </View>     
    );

    render() {

        return (

            <View style={ styles.container }>

                <FlatList
                    data={[{key: 'a'},{key: 'b'},{key: 'c'},{key: 'd'}]}
                    renderItem={this._renderItem}
                    keyExtractor={this._keyExtractor}
                    extraData={this.state.refresh}
                />

                <View style={ styles.testRowContainer }>
                    <View style={ styles.testCategoryColumn }>
                        <Text style={ styles.testCategoryText }>Test</Text>
                    </View>
                    <View style={ styles.testColumnContainer }>
                        <Text style={ styles.testCategoryText }>[X]</Text>
                    </View>
                    <View style={ styles.testColumnContainer }>
                        <Text style={ styles.testCategoryText }>[X]</Text>
                    </View>
                    <View style={ styles.testColumnContainer }>
                        <Text style={ styles.testCategoryText }>[X]</Text>
                    </View>
                    <View style={ styles.testColumnContainer }>
                        <Text style={ styles.testCategoryText }>[X]</Text>
                    </View>
                </View>     

            </View>

        );

    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        width: '100%',
        alignItems: 'center',
    },
    testRowContainer: {
        flex: 1,
        width: '100%',
        flexDirection: 'row'
    },
    testColumnContainer: {
        flex: 1,
        backgroundColor: 'red',
        alignItems: 'center',
        justifyContent: 'center'
    },
    testCategoryText: {
        fontSize: 36
    },
    testCategoryColumn: {
        backgroundColor: 'red',
        alignItems: 'center',
        justifyContent: 'center'
    },
});

export default CategoryScreen;

链接到running：https://snack.expo.io/BJJ97oHXH

正如你可能看到的(Snack似乎默认是网页版本-我正在做android版本，x没有显示在那里)，代码在扁平列表之外按预期工作，但当我把它放在扁平列表内时，它看起来不同。

我还尝试添加numColumns={5} (或1以外的任何数字)，当我这样做时，flatlist中的数据会一起消失。

我也尝试过使用contentContainerStyle，但是我不确定我应该在这里放什么。

谢谢!

react-native

react-native-flatlist

电商安全场景方案

帮助电商行业客户一站式解决Web安全、黑产羊毛党对抗、高危漏洞、BOT工具、恶意入侵门户服务器等安全问题

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-08-05 13:11:09

对于testColumnContainer的样式，您有一个flex值。这就是为什么所有的X'都超出了范围。也许X显示在手机区域的右侧。

您可以在testColumnContainer中删除flex :1

    testColumnContainer: {
        backgroundColor: 'red',
        alignItems: 'center',
        justifyContent: 'center'
    },

票数 1

Stack Overflow用户

发布于 2019-08-05 13:05:34

你的FlatList没有风格道具。你需要给它赋予风格，才能拥有你想要的功能。否则，就很难预测会发生什么。

在这里这应该是可行的，

...

<FlatList
  style={{ width: '100%' }}
  data={[{key: 'a'},{key: 'b'},{key: 'c'},{key: 'd'}]}
  renderItem={this._renderItem}
  keyExtractor={this._keyExtractor}
   extraData={this.state.refresh}
/>

...