React-Native ListView引起GraphQL结果错误

问题描述：

React-native的新手段我希望以下内容能够基于我在ListView附近看到的信息工作。React-Native ListView引起GraphQL结果错误

当我运行在Android模拟器的应用程序，我得到follwoing错误

之前的错误我看到一条警告...

代码在这页是...

import React, { Component, PropTypes } from 'react' 
import { View, Text, ListView } from 'native-base'; 

import { graphql } from 'react-apollo'; 
import gql from 'graphql-tag' 

class RootContainer extends Component { 
    render() { 
     return (
      <View> 
       <MatchData /> 
      </View> 
     ) 
    } 
} 

class MatchView extends Component { 
    render() { 
     if (this.props.data.loading) { 
      return (<Text>Loading...</Text>) 
     } 
     else { 
      if (this.props.data.error) { 
       return (<Text>error: {JSON.stringify(this.props.data.error)}</Text>) 
      } else { 
       return (<ListView 
        dataSource={this.props.data.getMatchList} 
        renderRow={(rowData) => <Text>{rowData.name}</Text>} 
        />) 
      } 
     } 
    } 

} 

MatchView.propTypes = { 
    data: PropTypes.shape({ 
     loading: PropTypes.bool, 
     error: React.PropTypes.object, 
     getMatchList: PropTypes.array 
    }).isRequired 
}; 

const QueryMatches = gql` 
    query templates { 
     getMatchList { 
      id, 
      name, 
     } 
    } 
`; 

const MatchData = graphql(QueryMatchList)(MatchView) 

export default RootContainer;

不工作的代码的部分是：

return (<ListView 
    dataSource={this.props.data.getMatchList} 
    renderRow={(rowData) => <Text>{rowData.name}</Text>} 
/>

从getMatchList结果是从graphQL响应一个标准阵列。如果我将ListView完全删除，则不会显示错误或警告（如果我将其替换为只是虚拟文本... <Text>it works</Text>）

不确定这里出了什么问题。

它需要转换吗？

答

问题解决了......

自从我使用native-base的ListView实际上是List和ListItem。因此，答案是...

List native-base docs

import { 
    View, 
    Text, 
    List, 
    ListItem, 
} from 'native-base';

与渲染方法：

return (<List dataArray={this.props.data.getMatchList} 
       renderRow={(item) => 
        <ListItem> 
         <Text>{item.name}</Text> 
        </ListItem> 
       }> 
      </List>

貌似错误是观测中非常通用。

React-Native ListView引起GraphQL结果错误

相关推荐