我在设置 Flatlist numColumn >=2 时遇到问题，抛出违规错误

Question

我在设置flatlist numcolumn> = 2时面临问题，丢弃了违规错误。

错误：

不变违规：不变违规：元素类型无效：预期字符串（用于内置组件）或类/函数（用于复合组件），但got：未定义。您可能会忘记从定义的文件中导出组件，或者您可能混合了默认值并命名imports

"axios": "^0.18.0",
 "react": "16.6.3",
 "react-native": "^0.58.4",
 "react-native-elements": "^1.0.0",
 "react-native-gesture-handler": "^1.0.15",
 "react-native-vector-icons": "^6.2.0",
 "react-navigation": "^3.1.2",

当设置numcolumn = {1}时，它运行良好，高于值1抛出错误

<FlatList data={this.state.mdata}
              renderItem={this.renderList}
              keyExtractor={(item, index) => `${index}`}
              horizontal={false} numColumns={2}/>

Imagelist.js

import {Text, View, ScrollView, TouchableOpacity,StyleSheet,Dimensions,FlatList} from 'react-native';
import  {Card}from 'react-native-elements';
import API from './axios';
const styles = StyleSheet.create({
    image: {
        flex:1,width:'50%',height:'50%',
        alignItems: 'center',
        justifyContent: 'center',
    },
})
export default class ImageList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            mloading: false,
            mdata: [],
            current_page: 1,
            merror: null,
            mhasMore: true
        }
    }
    componentDidMount()  { this.getListOfPictures(); }
    render() {
        return (
            <FlatList
              data={this.state.mdata}
              renderItem={this.renderList}
              keyExtractor={(item, index) => `${index}`}
              horizontal={false} numColumns={2}/> 
           )
    }

    /********************************************************************************
     * getListOfPictures All pictures for dashboard
     ********************************************************************************/
    getListOfPictures = () => {
        if (this.state.mloading) { return; }
        this.setState({ mloading: true });
        API.get(`dashboard/all`)
            .then(res => {
                console.log("reco1m",res.data.recommendations[0]);
                const nextPictures= res.data.recommendations.map(data => ({
                    title: data.style,
                    image_url: data.img,
                    description: data.description,
                    id: data.style
                }));
                console.log(nextPictures);
                this.setState({
                    mhasMore: true,
                    mdata: [...this.state.mdata, ...nextPictures],
                    mloading: false,
                    current_page: this.state.current_page + 1})
            }).catch(error => {this.setState({ merror:error, mloading: false });});
    }
    isCloseToBottom({ layoutMeasurement, contentOffset, contentSize }) {
        return layoutMeasurement.height + contentOffset.y
        >= contentSize.height - 0;
    }
    renderList = () => {
        return ( this.state.mdata.map((u) => {
            return (
                <View style={{flex: 0.5, height: 150, margin: 5}}>
                <TouchableOpacity
                    key={u.id} >
                   <Card
                       featuredTitle={u.title}
                       image={{ uri: u.image_url }}
                       imageStyle={styles.image}>
                       <View style={{ padding: 10 }}>
                           <Text style={{ fontSize: 15}}>Description:</Text>
                           <Text>{u.description}</Text>
                       </View>
                   </Card>
                </TouchableOpacity>
                </View>
            );
        }))
    }

}

Answer 1

renderItem to FlatList接受通过item传递的函数，您需要从中渲染一个元素

renderList = ({item: u}) => {
   return (
       <View style={{flex: 0.5, height: 150, margin: 5}}>
            <TouchableOpacity
                key={u.id} >
               <Card
                   featuredTitle={u.title}
                   image={{ uri: u.image_url }}
                   imageStyle={styles.image}>
                   <View style={{ padding: 10 }}>
                       <Text style={{ fontSize: 15}}>Description:</Text>
                       <Text>{u.description}</Text>
                   </View>
               </Card>
            </TouchableOpacity>
        </View>
    );
}

使用numColumns={1}，FlatList能够渲染从renderList返回的映射视图，但不能使用numColums={2}