flexDirection не работает с scrollview
Я пытаюсь сделать сетку с ScrollView, но я не получаю ожидаемый результат
<Text style={{width:100, height:100, backgroundColor:'red'}} >Text</Text>
<Text style={{width:100, height:100, backgroundColor:'red'}} >Text</Text>
<Text style={{width:100, height:100, backgroundColor:'red'}} >Text</Text>
<Text style={{width:100, height:100, backgroundColor:'red'}} >Text</Text>
</ScrollView>
РЕЗУЛЬТАТ: введите описание изображения здесь
2 ответа
Вы должны добавить стиль к вашему ScrollView contentContainerStyle, чтобы иметь flexDirection: 'row' и flexWrap: 'wrap'
import React, { Component } from 'react';
import { Text, StyleSheet, ScrollView } from 'react-native';
export default class App extends Component {
render() {
return (
<ScrollView contentContainerStyle={styles.container}>
<Text style={styles.cell}>
</Text>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
flexWrap: 'wrap'
},
cell: {
width: 100,
height: 100,
backgroundColor: 'red'
},
});
Обернуть каждый текст в представление
<View>
<Text style={{width:100, height:100, backgroundColor:'red'}}>Text</Text>
</View>