React Native FlatList设置numColumns未达预期展示效果如何解决

核心错误原因 #

• 错误1：renderTacos方法内部重复遍历了完整数据数组。FlatList的renderItem本身会逐一遍历传入的data数组，每一项单独调用渲染方法，你在渲染方法里又做了一次全量map，等于每行都会渲染全部4个食品项，自然布局完全错乱。
• 错误2：列表项未设置对应宽度，numColumns={2}要求每个子项宽度为屏幕的1/2，否则会因为宽度溢出导致折行。
• 错误3：状态更新写法不规范，直接修改原state数组属于可变操作，且setState传参格式错误，容易引发状态更新异常。

修复后代码 #

const TacosData = require("./JSON/TacosViande.json")
class Te extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: TacosData,
        };
    };
    onchecked(id) {
        // 生成新数组，不直接修改原state数据
        const newData = this.state.data.map(item => {
            if(item.id === id) {
                return {...item, checked: !item.checked}
            }
            return item
        })
        // 修正setState传参格式
        this.setState({data: newData})
    }
    // 移除内部map遍历，仅渲染传入的单个item
    renderTacos(item) {
        return (
            // 给列表项设置50%宽度适配双列布局
            <TouchableOpacity style={{ alignItems: 'center', width: '50%', marginVertical: 12 }} key={item.id} onPress={() => { this.onchecked(item.id) }}>
                {/* trim处理JSON里多余的空格 */}
                <Image style={styles.rednerImg} source={{ uri: item.image.trim() }} ></Image>
                <Text style={styles.rednertext}>{item.key.trim()}</Text>
                <CheckBox value={item.checked}
                    style={{ transform: [{ scaleX: 0.8 }, { scaleY: 0.8 }], }}
                    onValueChange={() => { this.onchecked(item.id) }}
                    tintColors={{ true: '#D05A0B', false: 'black' }}
                />
            </TouchableOpacity>
        )
    }
    render() {
        return (
            <View style={styles.container}>
                <FlatList
                    data={this.state.data}
                    numColumns={2}
                    // 可选添加行样式控制布局
                    columnWrapperStyle={{justifyContent: 'space-around'}}
                    renderItem={({ item }) => this.renderTacos(item)}
                    // 改用业务id作为key更稳妥
                    keyExtractor={(item) => item.id.toString()}
                />
            </View>
        );
    }
}

内容的提问来源于stack exchange，提问作者melek hedhili