React Nativeでテーブルレイアウトを設定する

Question

ReactプロジェクトをReact Nativeに移行していて、React Nativeでグリッドレイアウトを設定するのに役立つ必要があります。私は5列x行（行の数は​​異なる場合があります）のビューを設定したいと考えています。私はreact-native-tableview-simpleパッケージを使いましたが、セルのスパンを指定することはできません。また、私は列を設定することができるreact-native-flexbox-gridパッケージを試しましたが、まだ特定のセルのスパン幅を設定することはできません。私が使うことができるものがあれば不思議です。参考のため

、私はこのような線に沿って何かを見て、私の表のようになる：

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

Answer 1

あなたはすべてのパッケージなしでこれを行うことができます。各行がまったく同じ場合は、次の方法で問題を解決できます。

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> 
     ); 
    } 
} 

Answer 2

ここで答えを探したところ、私はブートストラップテーブルとよく似た、本当に素晴らしいライブラリを発見しました。私はReact Nativeのレイアウトが非常に難しいと判断しましたが、このライブラリは予測可能なレイアウト結果を提供します。

React Native Easy Grid

私はネイティブ反応するように、基本的なフレックステーブルを内蔵しなければならないことに同意するが、彼らは、このライブラリは私のために素晴らしい仕事をしているまで。