Wie erreicht man das quadratische Layout wie das Bild unten?Wie mit neun quadratischen Ansicht in React Native?
Oder ein ähnliches Paket existiert?
Wie erreicht man das quadratische Layout wie das Bild unten?Wie mit neun quadratischen Ansicht in React Native?
Oder ein ähnliches Paket existiert?
Ich verwende die Kombination von Scroll und Flexbox meiner statische Rasteransicht zu erreichen.
import {Dimensions} from 'react-native';
....
return (
<ScrollView>
<View style={styles.container}>
{
this.props.categories.map((category, index) => {
return (
<TouchableOpacity
key={index}
style={styles.item}
onPress={() => {}}
>
<Image
style={styles.itemIcon}
source="..."
/>
<Text style={styles.itemTitle}>
{category.name}
</Text>
</TouchableOpacity>
)
})
}
</View>
</ScrollView>
)
var styles = StyleSheet.create({
container: {
flexDirection: 'row',
flexWrap: 'wrap'
},
item: {
width: Dimensions.get('window').width * 0.5,
height: 100,
borderWidth: 1,
borderColor: "lightgray",
alignItems: 'center',
justifyContent: 'center'
},
itemIcon: {
width: 100,
height: 100,
resizeMode: 'contain'
},
itemTitle: {
marginTop: 16,
},
});
Verwenden RN eigene 'FlatList' Komponente zusammen mit' numOfColumns = {3} 'prop. Sie können das Scrollen deaktivieren, wenn diese Ansicht statisch sein soll. – zvona