Question

我有一组来自React Native基础库的卡片。我想从中选择一张独特的卡片。我没有找到类似html的“ id”之类的卡片属性。

Home.js

 return (
      <Container>
        <Header>
          <Body>
            <Title>Scanner</Title>
          </Body>
          <Right />
        </Header>
         <Content style= {{backgroundColor: '#cdc9c9'}}>
          <Card style= 
            {{width:100,height:100,backgroundColor:this.state.bgclr }} >
            <CardItem bordered>
              <Body>
                <Text>
                    Slot: 1A
                </Text>
              </Body>
            </CardItem>
            </Card>
            <Card style={{width:100,height:100}} >
            <CardItem bordered>
              <Body>
                <Text>
                    Slot: 1B
                </Text>
              </Body>
            </CardItem>
            </Card>
            <Card style={{width:100,height:100}}>
            <CardItem bordered>
              <Body>
                <Text>
                    Slot: 1C
                </Text>
              </Body>
            </CardItem>
            </Card>
            </Content> 
           <Button block success onPress={
             () => Alert.alert(this.setState({
             bgclr: 'green'}))}>
          <Text>Simulate Scan</Text>
          </Button>
          <Footer/>
      </Container>
    );
  }
}

请帮助我解决这个问题。

Answer 1

一种方法是将卡片以阵列形式存储，然后在渲染器上对其进行引用。

var cards = [
    <Card style= 
        {{width:100,height:100,backgroundColor:this.state.bgclr }} >
        <CardItem bordered>
          <Body>
            <Text>
                Slot: 1A
            </Text>
          </Body>
        </CardItem>
    </Card>,
    <Card style={{width:100,height:100}} >
        <CardItem bordered>
          <Body>
            <Text>
                Slot: 1B
            </Text>
          </Body>
        </CardItem>
    </Card>,
    <Card style={{width:100,height:100}}>
        <CardItem bordered>
          <Body>
            <Text>
                Slot: 1C
            </Text>
          </Body>
        </CardItem>
    </Card>
]

您可以在返回方法中引用它，方法是使用{cards}代替初始的Card元素（或{this.cards}或{this.props.cards}，具体取决于您正在存储cards变量）

return (
  <Container>
    <Header>
      <Body>
        <Title>Scanner</Title>
      </Body>
      <Right />
    </Header>
    <Content style= {{backgroundColor: '#cdc9c9'}}>
      {cards}
    </Content> 
    <Button block success onPress={
         () => Alert.alert(this.setState({
         bgclr: 'green'}))}>
      <Text>Simulate Scan</Text>
    </Button>
    <Footer/>
  </Container>
);

如何从ReactNative的卡片列表中选择特定的卡片

1 个答案: