在React Native中设置表格布局

我正在将React项目转换为React Native，并需要帮助在React Native中设置网格布局。我想按x行（行数可能有所不同）设置5列。我玩过react-native-tableview-simple软件包，但我无法指定单元格的跨度。我也尝试了react-native-flexbox-grid软件包，我可以设置列，但我仍然无法设置特定单元格的跨度宽度。我想知道有什么我可以使用的。在React Native中设置表格布局

仅供参考，我想我的表看起来沿着这样的线：

 |Col 1|Col 2|Col 3|Col 4|Col 5| 
    |------------------------------ 
Row 1|  Text  | Yes | No | 
    |------------------------------ 
Row 2|  Text  | Yes | No | 
    |------------------------------ 
Row 3|  Text  | Dropdown |

来源

2017-06-04 jamesvphan

你可以做到这一点没有任何软件包。如果每一行都完全相同，那么以下内容应该可以解决您的问题;

export default class Table extends Component { 
    renderRow() { 
     return (
      <View style={{ flex: 1, alignSelf: 'stretch', flexDirection: 'row' }}> 
       <View style={{ flex: 1, alignSelf: 'stretch' }} /> { /* Edit these as they are your cells. You may even take parameters to display different data/react elements etc. */} 
       <View style={{ flex: 1, alignSelf: 'stretch' }} /> 
       <View style={{ flex: 1, alignSelf: 'stretch' }} /> 
       <View style={{ flex: 1, alignSelf: 'stretch' }} /> 
       <View style={{ flex: 1, alignSelf: 'stretch' }} /> 
      </View> 
     ); 
    } 

    render() { 
     const data = [1, 2, 3, 4, 5]; 
     return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> 
      { 
       data.map((datum) => { // This will render a row for each data element. 
        return this.renderRow(); 
       }); 
      } 
      </View> 
     ); 
    } 
}

来源

2017-06-04 18:20:48

谢谢，我想这就是我需要的！ – jamesvphan

我有一个问题，如果我想跨越单元格多列，有没有一种方法来指定？由于现在我的行/列布局是静态的，我可能只需要为单元格设置一个固定的宽度就可以达到这个目的？ – jamesvphan

这样做使用flex是好得多。如果我是你，我会给renderRow函数一个指定单元格flex值的数组。之后，在View的样式部分，您只需编写flexVals [0]，flexsVals [1]等。您甚至可以在其中使用data.map以使其更清洁。 @jamesvphan –

在寻找答案后，我发现了一个非常棒的库，其行为与Bootstrap表非常相似。我发现React Native的布局非常具有挑战性，但是这个库提供了可预测的布局结果。

React Native Easy Grid

我同意，基本的弯曲表应建在反应原住民，但直到他们是这个库工作对我来说太棒了。

来源

2017-10-21 19:28:10 GenericJam

在React Native中设置表格布局

回答

相关问题