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;

import React，{Component}来自'React'；
进口{
看法
样式表，
文本
扁平列表
}从“反应本机”；
类类别屏幕扩展组件{
建造师（道具）{
超级（道具）；
此.state={
刷新：false
};
}
_keyExtractor=（项，索引）=>index.toString（）；
_renderItem=（{item，index}）=>(
测验
[X]
[X]
[X]
[X]
);
render（）{
返回(
测验
[X]
[X]
[X]
[X]
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
宽度：“100%”，
对齐项目：“居中”，
},
testRowContainer：{
弹性：1，
宽度：“100%”，
flexDirection:“行”
},
testColumnContainer：{
弹性：1，
背景颜色：“红色”，
对齐项目：“居中”，
为内容辩护：“中心”
},
testCategoryText：{
字号：36
},
testCategoryColumn：{
背景颜色：“红色”，
对齐项目：“居中”，
为内容辩护：“中心”
},
});
导出默认类别屏幕；

链接到running：

正如您可能看到的（Snapshot似乎默认为web版本-我正在使用android版本，[x]没有显示在那里），代码在flatlist之外按预期工作，但当我将其放入flatlist时，它看起来不同

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

我也搞砸了contentContainerStyle，但不确定我应该在这里放什么

---

谢谢

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

这应该行得通

...

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

...

。。。
...

testColumnContainer的样式有一个

flex

值。这就是为什么所有

X'

s都超出范围。可能手机区域的右侧显示了

X

您可以在

testColumnContainer

testColumnContainer:{
背景颜色：“红色”，
对齐项目：“居中”，
为内容辩护：“中心”
},

您解决了主要问题！我对flex做了一些研究，希望我现在能对它有更多的了解。非常感谢。你的回答在一定程度上帮助了我解决了这个问题！非常感谢。