这篇博客介绍了如何在ReactNative中利用flex布局的wrap属性实现自动换行的效果。通过设置container和function_list的flexDirection为'column'和'row'，并启用flexWrap属性，可以创建一个能根据屏幕宽度自动换行的组件。文章提供了具体的样式代码示例。
核心思想：
基于row布局的wrap属性实现自动换行
WorkStatusViewStyles = StyleSheet.create({
//基于flex-box布局
container: {
width: width,
flexDirection: 'column',
flexWrap: 'wrap',
backgroundColor: '#dd0ff0',
alignItems: 'flex-start',
justifyContent: 'flex-start',
},
function_list: {
//以下四个关键属性实现自动换行
width: width,
flexWrap: 'wrap',
display:'flex',
flexDirection: 'row',
backgroundColor: '#FBFBFB',
},
function_list_item_normal: {
flexWrap: 'wrap',
flexDirection: 'column',
alignItems: 'flex-start',
justifyContent: 'flex-start',
backgroundColor: '#FFFFFF',
padding: 9.6,
margin: 9.6 / 4,
},
function_list_item_selected: {
flexWrap: 'wrap',
flexDirection: 'column',
alignItems: 'flex-start',
justifyContent: 'flex-start',
backgroundColor: '#0088F3',
padding: 9.6,
margin: 9.6 / 4,
},
normal_text: {
fontSize: 16,
},
});
效果
屏幕快照 2018-01-22 下午2.33.04.png
扫一扫
309
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
