时间戳

首页 > 解决方案 > 如何从 ReactNative 中的卡片列表中选择特定卡片

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

问题描述

我有一组取自 React Native 基础库的卡片。我想从中选择一张独特的卡片。我还没有找到任何类似于 html 的卡片属性，例如“id”。

主页.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>
    );
  }
}

请帮我解决这个问题。

标签： react-nativereact-native-android

解决方案

一种方法是以数组形式存储卡片，然后在渲染中引用它。

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>
);

推荐阅读