react-native – 使用可独立对齐和追加的Listview元素的React Na

发布时间：2020-12-15 20:30:01 所属栏目：百科来源：网络整理

导读：我有一个关于Listview元素对齐的问题,这些元素应该以更加盒装的方式显示而不是以行方式显示.在图片中,您可以看到当前状态,该状态是使用Listview的contentContainerStyle prop中使用的StyleSheet代码生成的： ListViewStyle: { flexDirection: 'row',flexWrap

我有一个关于Listview元素对齐的问题,这些元素应该以更加盒装的方式显示而不是以行方式显示.在图片中,您可以看到当前状态,该状态是使用Listview的contentContainerStyle prop中使用的StyleSheet代码生成的：

ListViewStyle: {
  flexDirection: 'row',flexWrap: 'wrap',}

我想要实现的是包装Listview元素,而不是在行换行之后开始新行,因此在Listview元素的顶部没有空格.

知道如何实现这个漂亮干净吗？谢谢！

解决方法

有人试图做同样的事情 here.但基本的想法是你想用不同的flex值设置ListView组件的子元素.

看看下面的代码：

import React,{ Component } from 'react';
import { AppRegistry,View } from 'react-native';

class AlignItemsBasics extends Component {
  render() {
    return (
      <View style={{flex: 1,flexDirection: 'row'}}>
        <View style={{
          flex: 1,flexDirection: 'column',}}>
          <View style={{flex:1,backgroundColor: 'red'}} />
          <View style={{flex: 2,backgroundColor: 'blue'}} />
          <View style={{flex:1,backgroundColor: 'green'}} />
          <View style={{flex:3,backgroundColor: 'grey'}} />
          <View style={{flex: 2,backgroundColor: 'skyblue'}} />

        </View>
        <View style={{
          flex: 1,}}>
          <View style={{flex:5,backgroundColor: 'pink'}} />
          <View style={{flex: 2,backgroundColor: 'red'}} />
        </View>
      </View>
    );
  }
};

AppRegistry.registerComponent('AwesomeProject',() => AlignItemsBasics);

由于您希望具有两个相同宽度的列,因此您将拥有一个包含2个封闭视图的主视图,每个视图具有相同的flex值.在每个视图中,您可以使用不同的弹性值来获得不同高度的图像.我只是硬编码组件,以显示它在下面的链接上的样子.您可能希望将其替换为生成动态输入的某种类型的渲染函数.

请参阅操作here中的代码

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!