Question

我收到了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

Answer 1

替换

onPress={console.log("Pressed")}

带

onPress={() => console.log("Pressed")}

React native：在呈现视图时禁用每张卡的自动点击

1 个答案: