NativeBase無法列出陣列的僅某些部分

所以我的數據是：NativeBase無法列出陣列的僅某些部分

[ 
    {"id_categories":1,"name":"One"}, 
    {"id_categories":2,"name":"Two"}, 
    {"id_categories":3,"name":"Three"} 
]

而我的類來顯示列表是：

import React, { Component } from 'react'; 
import { Text } from 'react-native'; 
import { Container, Content, Card, CardItem, Body, Left, 
     Right, List, ListItem, } from 'native-base'; 

export default class ListData extends Component { 
    render(){ 

     let articles = this.props.data.map(function(items, index){ 
      return(
      <List dataArray={items} 
       renderRow={(item) => 
        <ListItem> 
        <Text>{item}</Text> // this displays the id also 
        <Text>{item.name}</Text> // this does not display anything 
        //Only using one of the two <Text> above at a time 
        </ListItem> 
       }> 
      </List> 
     ) 
     }); 

     return(
     <Content> 
      {articles} 
     </Content>  

     ) 
    } 
}

我希望能夠只顯示列表中的name，並將其設爲TouchableOpacity並將點擊的id_categories的值傳遞到另一個屏幕。但我不能夠顯示只有name

來源

2017-08-15 Somename

你item內map功能已經是你要處理的一個：{"id_categories":1,"name":"One"}。

所以map循環中，你可以通過item.name如下訪問name：

let articles = this.props.data.map(function(item, index) { 
 
    // item ={"id_categories":1,"name":"One"}, 
 
    return(
 
    <List dataArray={"I will skip this one"} 
 
     renderRow={(item) => 
 
     <ListItem> 
 
      <Text>{item.name}</Text> 
 
     </ListItem> 
 
     }> 
 
    </List> 
 
) 
 
});

編輯

只是看看NativeBaseList，我覺得這應該符合你的要求

let articles = (
 
    <List dataArray={this.props.data} 
 
     renderRow={(item) => <ListItem><Text>{item.name}</Text></ListItem>}> 
 
    </List> 
 
) 
 
});

來源

2017-08-15 14:58:04

你是什麼意思'dataArray = {「我會跳過這一個」}「我應該讓它成爲一個空的對象嗎？或者不提'dataArray'？ – Somename

由於在'map'函數中，'item'不是'Array'。我不知道它是否符合你的目的。但是，如果我正確理解你的代碼，它應該是'this.props.data' –

我正在映射'articles'，所以我可以返回它。如果這是有道理的。 – Somename

你並不需要，如果你使用本地基地名單 dataArray中包含您的陣列中的數據和renderrow包含的組件或自定義組件映射你的陣列。

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

來源

2017-08-15 15:37:46

NativeBase無法列出陣列的僅某些部分

回答

相關問題