Один из способов сделать это - сохранить карточки в виде массива, а затем сослаться на него в рендере.
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>
);