我的代码不起作用。我想从对象数组中渲染卡片。但是，使用NativeBase似乎很难。
CardsScreen.js：
import React, { Component } from 'react';
import { Image } from 'react-native';
import { Container, Header, Content, Card, CardItem, Thumbnail, Text, Button, Icon, Left, Body, Right } from 'native-base';
class CardsScreen extends Component {
props:Props;
DATA = [
{ id: 1, title: 'Lorem ipsum dolor sit amet, everti rationibus his cu', views:'200', comments:'9', published:'4h ago' image: require('../img/img1.jpeg') },
{ id: 2, title: 'Lorem ipsum dolor sit amet, everti rationibus his ', Views:'700', comments:'16', published:'9h ago' image: require ('../img/img2.jpg') },
{ id: 3, title: 'Lorem ipsum dolor sit amet, everti rationibus hi', Views:'698', comments:'8', published:'14h ago' image:require ('../img/img3.jpeg') },
];
render() {
let renderpostTypes = () => {
let post = [];
this.DATA.map( ( item )=> {
post.push(
<Content key={item.id}>
<Card>
<CardItem>
<Left>
<Thumbnail source={require(item.image)} />
<Body>
<Text>item.title</Text>
<Text note>GeekyAnts</Text>
</Body>
</Left>
</CardItem>
<CardItem cardBody>
<Image source={require(item.image)} style={{height: 200, width: null, flex: 1}}/>
</CardItem>
<CardItem>
<Left>
<Button transparent>
<Icon active name="thumbs-up" />
<Text>item.views</Text>
</Button>
</Left>
<Body>
<Button transparent>
<Icon active name="chatbubbles" />
<Text>item.comments</Text>
</Button>
</Body>
<Right>
<Text>item.published</Text>
</Right>
</CardItem>
</Card>
</Content>
);
} );
return post;
};
return (
<Container>
<Content >
{renderpostTypes()}
</Content>
</Container>);
}
}
export default CardsScreen;
如何使其工作并从该对象数组中呈现卡片？有没有解决这个问题的例子？
我已经尝试了你的代码，这在我的设备中有效。但我有一个示例代码如果你想在本机基础上使用数组渲染卡，这是代码：
import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';
import { Container, Header, Content, Card, CardItem, Thumbnail, Text, Button, Icon, Left, Body, Right } from 'native-base';
class CardsScreen extends Component {
constructor(props) {
super(props);
this.state = {
DATA : [
{ id: 1, title: 'Lorem ipsum dolor sit amet, everti rationibus his cu', views:'200', comments:'9', published:'4h ago', image: '../img/img1.jpeg' },
{ id: 2, title: 'Lorem ipsum dolor sit amet, everti rationibus his ', Views:'700', comments:'16', published:'9h ago', image: '../img/img1.jpeg' },
{ id: 3, title: 'Lorem ipsum dolor sit amet, everti rationibus hi', Views:'698', comments:'8', published:'14h ago', image: '../img/img1.jpeg' },
],
}
}
render() {
return (
<Container>
<Content>
{this.state.DATA.map((item, index) => {
return(
<Card key={index} >
<CardItem>
<Left>
<Thumbnail source={require(item.image)}/>
<Body>
<Text>{item.title}</Text>
<Text note>GeekyAnts</Text>
</Body>
</Left>
</CardItem>
<CardItem cardBody>
<Image source={require(item.image)} style={{height: 200, width: null, flex: 1}} />
</CardItem>
<CardItem>
<Left>
<Button transparent>
<Icon active name="thumbs-up" />
<Text>{item.views}</Text>
</Button>
</Left>
<Body>
<Button transparent>
<Icon active name="chatbubbles" />
<Text>{item.comments}</Text>
</Button>
</Body>
<Right>
<Text>{item.published}</Text>
</Right>
</CardItem>
</Card>
);
})}
</Content>
</Container>);
}
}
AppRegistry.registerComponent('ExampleApps', () => CardsScreen);
希望可以帮到你:)
class MyComponent extends Component {
constructor() {
super();
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows(yourDataArray),
};
}
render() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) => <card></card>}
/>
);
}
}
使用列表视图中的本地响应卡片布局。下面的链接将很有帮助。 http://facebook.github.io/react-native/releases/0.46/docs/listview.html#listview
这是一个可以纠正您的代码的示例。以下每一个都使用了NATIVE BASE
export default class DynamicListExample extends Component {
render() {
var items = ['Simon Mignolet','Nathaniel Clyne','Dejan'];
return (
<Container>
<Content>
<List dataArray={items}
renderRow={(item) =>
<ListItem>
**YOU CAN PUT YOUR HOLE CARD COMPONENT IN BETWEEN THESE LIST**
</ListItem>
}>
</List>
</Content>
</Container>
);
}
}
下面是一个示例，例如使用本机库并处理此问题的代码示例。
const result = this.props.articles.map((item, index) => (
<Card key={index}>
<CardItem header bordered>
<Text>{item.title}</Text>
</CardItem>
<CardItem bordered>
<Body>
<Text>{item.body}</Text>
</Body>
</CardItem>
<CardItem footer bordered>
<Text>GeekyAnts</Text>
</CardItem>
</Card>
));
return (
<Container>
<Content>{result}</Content>
</Container>
);