API から応答を受け取り、それを解析して、nativebase.io cardlist を使用して画面にいくつかの機能を表示しました。すべての結果が表示されたら、各カードをクリック可能にし、クリックするたびに、特定のカードの内容に応じて次の詳細画面に進みます。ただし、カードリストが何らかの理由でレンダリングされると、ユーザーの操作なしですべてのカードがクリックされます。したがって、特定のカードに触れたときにのみカードのクリックを許可するソリューションを探しています。
class Results extends Component{
constructor(props){
super(props);
this.state = {
data: this.props.results
}
}
renderRow(item){
const bars = [ require('../assets/bar0.png'),
require('../assets/bar1.png'),
require('../assets/bar2.png'),
require('../assets/bar3.png')]
var bar = item.weight === -1 ? bars[0] : bars[item.weight]
return (
<CardItem button onPress={console.log("Pressed")} style={{width: 400}}>
<Thumbnail source={bar}/>
<Text>{item.label}</Text>
<Text note style={{textDecorationLine: 'line-through'}}>{item.excluded}</Text>
</CardItem>
)
}
render(){
console.log(this.state.data)
return (
<Container>
<Header>
<Title>symptoma</Title>
</Header>
<Content>
<Card dataArray={this.state.data}
renderRow={(item) =>
this.renderRow(item)
}>
</Card>
</Content>
</Container>
);
}
}
export default Results