正如您在示例图像中看到的,我有几张卡,每张卡都有不同的属性。
我必须使它,以便当一个长按是做了一个特定的菜单上的卡打开(即。e.与其属性),如果你试图打开一个菜单,但已经有一个菜单打开,前一个应该关闭,并在卡应该在的位置打开新的。
菜单示例:menu
我在怎么做这件事上遇到了一些问题,你能帮我吗?
链接:expo
import { Text, View, StyleSheet, ImageBackground } from 'react-native';
import { Card, Chip } from 'react-native-paper';
import { FlatGrid } from 'react-native-super-grid';
export default function App() {
const t = [...Array(36).keys()].map((i) => ({ name: 'Name-' + i, ep: i }));
return (
<View style={styles.container}>
<FlatGrid
itemDimension={160}
data={t}
renderItem={({ item }) => (
<Card style={{ height: 160 }}>
<ImageBackground
source={{
uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1200px-React-icon.svg.png',
}}
style={{
height: 160,
borderRadius: 4,
overflow: 'hidden',
}}>
<Card.Content
style={{
backgroundColor: 'rgba(0, 0, 0, 0.5)',
position: 'absolute',
bottom: 0,
paddingTop: 2,
paddingBottom: 2,
}}>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
alignContent: 'flex-end',
}}>
<View style={{ width: 120 }}>
<Text variant="bodySmall" style={{ color: '#fff' }}>
{item.name}
</Text>
<Text variant="bodySmall" style={{ color: '#fff' }}>
2 hours ago
</Text>
</View>
<Chip
style={{
backgroundColor: '#1faeb3',
height: 28,
}}>
{item.ep}
</Chip>
</View>
</Card.Content>
</ImageBackground>
</Card>
)}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: 30,
backgroundColor: '#000',
padding: 8,
},
});
1条答案
按热度按时间5vf7fwbs1#
可以使用
react-native-material-menu