###実現したいこと
Viewに設定した横幅の中でFlatListの要素を折り返したいのですが、横一列に並んでしまいます。
伝わりにくいかもしれませんが、横方向にスクロールすると一列に全ての要素が並べられていることが分かります。
該当のソースコード
List.js
1 <View style={styles.list}> 2 <FlatList 3 horizontal={true} 4 data={data} 5 renderItem={({ item }) => { 6 return <Card item={item}/>; 7 }} 8 /> 9 </View> 10 11const styles = StyleSheet.create({ 12 list: { 13 flex:1, 14 flexDirection:'row', 15 flexWrap:'wrap', 16 marginTop: 16, 17 width: 300, 18 backgroundColor: "blue", 19 alignSelf: "center", 20 alignItems:"flex-start", 21 }, 22});
Card.js
1const Card = ({ item }) => { 2 return ( 3 <View style={styles.card}> 4 <Text>{item}</Text> 5 </View> 6 ); 7}; 8 9const styles = StyleSheet.create({ 10 card: { 11 backgroundColor: "red", 12 width: 120, 13 height: 160, 14 marginHorizontal: 16, 15 marginVertical: 8, 16 }, 17});
解決方法をご存知の方、教えていただけると助かります。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/10/02 03:53
2020/10/02 04:57
2020/10/02 05:24