0

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
4

1 に答える 1