I'm new to Expo and trying to develop a first app.
I have a list of cards, in which I display a text. This text may be long, so I set up a "Read more / Read less" mechanism. Each card has a reading state : if true, I show full text else I show the short text.
This works well on mobile but not on web. I assume the onPress event is fired, as the alert is shown.
Here is a snack to test the thing : https://snack.expo.io/@clementbrizard/cb7919
And the code :
import React, { useState } from 'react';
import { View, Text, FlatList, TouchableOpacity } from 'react-native';
import { Card } from 'react-native-elements';
const deliveries = [
{
id: '1',
date: 'date1',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
},
{
id: '2',
date: 'date2',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
},
];
export default function App() {
const deliveriesReadingState = deliveries.reduce((acc, cur) => ({...acc, [cur.id]: false}), {});
const [readingStates, setReadingStates] = useState(deliveriesReadingState);
const setReadingState = (id) => {
alert('hello');
setReadingStates(Object.assign({...readingStates}, { [id]: !readingStates[id] }));
};
const ShortText = (props) => {
return (
<View>
<Text numberOfLines = {3}>
{props.text}
</Text>
<TouchableOpacity onPress={() => { setReadingState(props.id) }}>
<Text>Voir plus</Text>
</TouchableOpacity>
</View>
);
}
const FullText = (props) => {
return (
<View>
<Text>
{props.text}
</Text>
<TouchableOpacity onPress={() => { setReadingState(props.id) }}>
<Text>Voir moins</Text>
</TouchableOpacity>
</View>
);
}
return (
<View>
<FlatList
data={deliveries}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<Card>
<Card.Title>{item.date}</Card.Title>
<Card.Divider />
{
readingStates[item.id]
? <FullText text={item.description} id={item.id} />
: <ShortText text={item.description} id={item.id}/>
}
</Card>
)}
/>
</View>
);
}
Aucun commentaire:
Enregistrer un commentaire