Javascript 渲染数据时如何在React native中使用CardView？

我从API调用中得到一些JSON数组，我想使用CardView在列表中显示它们。但当我使用CardView标记时，它会继续渲染，但不会显示卡中的数据。当我在控制台中记录数据并打印值时，获取数据并没有什么问题。 如果我移除了cardView标签，那么它工作正常

我使用以下命令安装了CardView组件-

npm安装反应本机cardview--保存

我从网站上得到了帮助-

但它并没有像上面提到的那样起作用。所以，在这里，我提供了代码-

import React from 'react';
import { StyleSheet, Text, View, Image, AsyncStorage, ActivityIndicator, TouchableOpacity, ToastAndroid, FlatList } from 'react-native';
import {Icon, Button, Container, Header, Content, Left} from 'native-base';
import CustomHeader from './CustomHeader';

import CardView from 'react-native-cardview';

let jwt=''
 class NoteMeHome extends React.Component {

   state = {
      getValue: '',
      dataSource:[],
      isLoading: true
    }

  componentDidMount() {
    AsyncStorage.getItem("token").then(value => {
      const url = 'my url';
     return fetch(url, {
      method: 'GET',
      headers: new Headers({
        'Content-Type' : 'application/json',
        'token': 'abc',
        'jwt': value
      })
    })
     .then((response)=> response.json() )
    .then((responseJson) => {
      console.log('####:'+responseJson[0].title)
      this.setState({
        dataSource: responseJson,
        isLoading: false,
        getValue: value

      })
    })
    .catch((Error) => {
      console.log(Error)
    })

    }

    )}


  static navigationOptions = ({navigation}) => ({
    title: "Home",
    headerLeft: <Icon name="ios-menu" style={{paddingLeft:10}}
    onPress={()=>navigation.navigate('DrawerOpen')}/>,

    drawerIcon: 

    <Image source={{uri: 'https://png.icons8.com/message/ultraviolet/50/3498db'}}
            style={styles.icon}
    />
  })



  render() {
    const { getValue } = this.state;

    return(
      this.state.isLoading
      ?
      <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
        <ActivityIndicator size="large" color="#330066" animating/>
      </View>
      :
      <Container>
        <CustomHeader
          title="Home"
          drawerOpen={()=>this.props.navigation.navigate('DrawerOpen')}
        />

        <View>
          <FlatList
            data={this.state.dataSource}
            renderItem={this.renderItem}
            keyExtractor = {(item, index) => index+""}
            ItemSeparatorComponent={this.renderSeparator}
          />
        </View>


      </Container>
    )
  }

  renderSeparator = ()=> {
    return (
      <View style={{height:1, width:'100%', backgroundColor:'black'}}>

      </View>
    )
  }

  renderItem = ({item}) => {
    return(

           <TouchableOpacity style={{flex:1, flexDirection:'row'}}
            onPress= {() => ToastAndroid.show(item.title, ToastAndroid.SHORT)}
          >

  <CardView
          cardElevation={3}
          cardMaxElevation={2}
          cornerRadius={5}
     paddingBottom={10}

     style={{justifyContent:'center',margin:2,backgroundColor:'white'}}

    // height='auto' or you can also specify the height in number  as per requirement
          >
       <View style={{padding:10}}>


     <Image style={{width:80, height:80, margin:5}}
               source={{uri: 'https://png.icons8.com/message/ultraviolet/50/3498db'}}
        />
        <View style={{flex:1, justifyContent:'center', marginLeft:5}}>
            <Text style={{fontSize:18, color:'green', marginBottom:10}}>
              {item.category}
            </Text>

            <Text style={{fontSize:18, color:'red', marginBottom:10}}>
              {item.title}
            </Text>
        </View>

        </View>
 </CardView>


      </TouchableOpacity>

    )
  }


}

const styles = StyleSheet.create({
  icon:{
    height: 24,
    width: 24
  },
  container:{
    flex:1,
    backgroundColor:'#fff'
  }
})
export default NoteMeHome;

从“React”导入React；
从“react native”导入{样式表、文本、视图、图像、异步存储、ActivityIndicator、TouchableOpacity、ToastAndroid、FlatList}；
从“本机基础”导入{图标、按钮、容器、标题、内容、左侧}；
从“/CustomHeader”导入CustomHeader；
从“react native CardView”导入CardView；
让jwt=''
类NoteMeHome扩展了React.Component{
状态={
getValue:“”，
数据源：[]，
孤岛加载：正确
}
componentDidMount（）{
AsyncStorage.getItem（“令牌”）。然后（值=>{
const url='我的url'；
返回获取（url{
方法：“GET”，
标题：新标题({
“内容类型”：“应用程序/json”，
“令牌”：“abc”，
“jwt”：值
})
})
.then（（response）=>response.json（））
.然后（（responseJson）=>{
console.log（“#####：”+responseJson[0]。标题）
这是我的国家({
数据来源：responseJson，
孤岛加载：false，
getValue:value
})
})
.catch（（错误）=>{
console.log（错误）
})
}
)}
静态导航选项=（{navigation}）=>({
标题：“家”，
headerLeft:navigation.navigate（'drawerropen'）}/>，
付款人：
})
render（）{
const{getValue}=this.state；
返回(
此.state.isLoading
?
:
this.props.navigation.navigate（'drawerropen'）}
/>
索引+“”}
ItemSeparatorComponent={this.renderSeparator}
/>
)
}
RenderParator=（）=>{
返回(
)
}
renderItem=（{item}）=>{
返回(
ToastAndroid.show（item.title，ToastAndroid.SHORT）}
>
{item.category}
{item.title}
)
}
}
const styles=StyleSheet.create({
图标：{
身高：24，
宽度：24
},
容器：{
弹性：1，
背景颜色：“#fff”
}
})
导出默认NoteMeHome；

因此，如果有人能帮助我知道如何在cardView中显示项目列表，那将是非常好的