平面列表内部与外部的不同结果

Question

我是 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;

Link 到运行： https://snack.expo.io/BJJ97oHXH

如您所见（Snack 似乎默认为网络版本 - 我正在做 android 版本并且 [x] 没有出现在那里），代码按预期工作在平面列表之外，但是当我把它放在平面列表中时看起来不同。

我也试过添加 numColumns={5}（或除 1 以外的任何数字），当我这样做时，flatlist 中的数据一起消失了。

我也弄乱了 contentContainerStyle，但不确定我应该放在这里什么。

谢谢！

Answer 1

您的 FlatList 没有样式道具。您需要赋予它风格以拥有您想要的功能。否则很难预测会发生什么。

这里应该可以，

...

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

...

Answer 2

您的 testColumnContainer 样式有一个 flex 值。这就是为什么所有 X' 都超出范围的原因。可能 X 显示在单元格 phone 区域的右侧。

您可以在 testColumnContainer

中删除 flex :1

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

平面列表内部与外部的不同结果

Different results inside a flatlist vs outside

react-native

react-native-flatlist