При настройке вашего состояния включите свойство в объекты для отображения:
this.state = {
alarmsOnSite: whereverYoureGettingTheDataNow.map(obj => ({...obj, showing: false})),
// ...
};
Затем, в ответ на прикосновение, установите этот флаг на true
, а затем вернитесь к false
через пять секунд. Например, если касание находится на самом ToucableOpacity
(извините, я не знаю этот компонент):
<View style={[GlobalStyles.GreyBox, {position:'relative'}]}>
<Text style={GlobalStyles.starText}>
{data.showing ? data.code : "********"}
</Text>
<TouchableOpacity
style={CheckInStyles.eyeballImagePlacement}
onTouch={() => this.showAlarm(data)}
>
<View style={CheckInStyles.eyeballImage} >
<Image
style={CheckInStyles.eyeballImageImage}
source={require('../images/icons/ico-eyeball.png')}
/>
</View>
</TouchableOpacity>
</View>
... где showAlarm
:
showAlarm(alarm) {
let updated = null;
this.setState(
({alarmsOnSite}) => ({
alarmsOnSite: alarmsOnSite.map(a => {
if (a === alarm) {
return updated = {...a, showing: true};
}
return a;
})
}),
() => {
setTimeout(() => {
this.setState(({alarmsOnSite}) => ({
alarmsOnSite: alarmsOnSite.map(a => a === updated ? {...a, showing: false} : a)
}));
}, 5000);
}
);
}
... или аналогичный.
Вот упрощенный пример:
const whereverYoureGettingTheDataNow = [{ location: "Main Door", code:"123456"}, { location: "Back Door", code:"456789"}];
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
alarmsOnSite: whereverYoureGettingTheDataNow.map(obj => ({...obj, showing: false})),
// ...
};
}
showAlarm(alarm) {
let updated = null;
this.setState(
({alarmsOnSite}) => ({
alarmsOnSite: alarmsOnSite.map(a => {
if (a === alarm) {
return updated = {...a, showing: true};
}
return a;
})
}),
() => {
setTimeout(() => {
this.setState(({alarmsOnSite}) => ({
alarmsOnSite: alarmsOnSite.map(a => a === updated ? {...a, showing: false} : a)
}));
}, 5000);
}
);
}
render() {
return <div>
{this.state.alarmsOnSite.map((data, index) => (
<div key={index}>
{data.location}
<div onClick={() => this.showAlarm(data)}>
{data.showing ? data.code : "********"}
</div>
</div>
))}
</div>;
}
}
ReactDOM.render(<Example/>, document.getElementById("root"));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.development.js"></script>