React Native Grid 视图以显示比较表

Question

使用 react native 如何构建一个比较表，看起来像 https://www.edrawsoft.com/templates/images/smart-phone-comparison-table.png

如果可能的话，我还想有一个节标题。例如，价格不在其自己的列中，但类似于 iOS 中的表部分标题 列表视图会给我一列，但我想要多列

谢谢

编辑： 下面的代码有效，但问题是如果我水平滚动，那么只有一个列表视图会滚动。我希望他们两个都滚动。 （我基本上是在尝试制作像 excel 这样的行和列，在我的情况下数据可能很大（30 行和 5-8 列），我不想对其进行硬编码。）

 render() {
    return (
      <ScrollView> 
      <ListView horizontal
        style={styles.container}
        dataSource={this.state.dataSource}
        renderRow={this.renderRow}
      />

         <ListView horizontal
        style={styles.container}
        dataSource={this.state.dataSource}
        renderRow={this.renderRow}
      />

      </ScrollView>
    )

在下图中，我希望在滚动第二个列表视图时滚动两个列表视图，但如图所示，只有第二个 ListView 正在滚动，而不是第一个...

Answer 1

使用 flex-box 样式可以很容易地实现这一点。如果你是 React-native 的新手。 Listview 乍一看有点令人生畏（数据源，克隆行 {rowHasChanged: (r1, r2) => r1 !== r2})??）。为了保持简单并更好地理解 Flex-box，这应该可以完成您的工作。但更推荐使用 ListView。

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

class Example extends Component{
  render() {
    return (
      <View style={{flex:1}}>

          <View style={styles.Row}>
              <View style={styles.Box1}>
                  <Text>Box 1</Text>
              </View>
              <View style={styles.Box2}>
                  <Text>Box 2</Text>
              </View>
              <View style={styles.Box1}>
                  <Text>Box 3</Text>
              </View>
              {/*
                <View....
                The more Views you add here the more horizontal Boxes you have
                */}
          </View>


          <View style={styles.Row}>
              <View style={styles.Box2}>
                  <Text>Box 1</Text>
              </View>
              <View style={styles.Box1}>
                  <Text>Box 2</Text>
              </View>
              <View style={styles.Box2}>
                  <Text>Box 3</Text>
              </View>
          </View>
          {/*
            <View....
            The more Views you add here the more rows  you have
            */}

      </View>
    )
  }
}

const styles = StyleSheet.create({
  Row : {flex:1,flexDirection:'row'},
  Box1 : {flex:1,backgroundColor:'tan',alignItems:'center',justifyContent:'center'},
  Box2 : {flex:1,backgroundColor:'coral',alignItems:'center',justifyContent:'center'},
});

module.exports = Example

Answer 2

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

class MultiScroll extends Component {

  render() {
    var tableData = []
    for(i = 0; i < 90; i++){
      tableData.push(['Row '+ i + ' Item 1','Row '+ i + ' Item 2','Row '+ i + ' Item 3','Row '+ i + ' Item 4','Row '+ i + ' Item 5','Row '+ i + ' Item 6','Row '+ i + ' Item 7','Row '+ i + ' Item 8','Row '+ i + ' Item 9','Row '+ i + ' Item 10'])
    }
    return (
      <View>
          <View style={{flexDirection:'row',marginTop:0}}>
          <ScrollView>
            <ScrollView horizontal = {true} showsHorizontalScrollIndicator= {false}>
                <View style={{}}>
                  {
                    tableData.map((eachRow,j) => {
                          return (
                            <View style={{flexDirection:'row'}} key = {j}>
                                {
                                  eachRow.map((eachItem,i) => {
                                    return <View key = {i} style={{width:100,height:30,backgroundColor:(((j+i)%2)?'tan':'coral'),alignItems:'center',justifyContent:'center'}}><Text>{eachItem}</Text></View>
                                  })
                                }
                            </View>
                          );
                      })
                  }
                </View>
            </ScrollView>
          </ScrollView>
          </View>
      </View>
    );
  }
}

module.exports = MultiScroll

希望这会有所帮助:)

Answer 3

<View>
  <View style={{flexDirection:'row'}}>
    <ScrollView horizontal ={true} showsHorizontalScrollIndicator= {false}>
        <View style={{width:100,height:30}}><Text>Button</Text></View>
        <View style={{width:100,height:30}}><Text>Button</Text></View>
        <View style={{width:100,height:30}}><Text>Button</Text></View>
        <View style={{width:100,height:30}}><Text>Button</Text></View>
        <View style={{width:100,height:30}}><Text>Button</Text></View>
        <View style={{width:100,height:30}}><Text>Button</Text></View>
        <View style={{width:100,height:30}}><Text>Button</Text></View>
    </ScrollView>
  </View>
  <View style={{flexDirection:'row'}}>
    <ScrollView horizontal ={true} showsHorizontalScrollIndicator= {false}>
        <View style={{width:100,height:30}}><Text>Button</Text></View>
        <View style={{width:100,height:30}}><Text>Button</Text></View>
        <View style={{width:100,height:30}}><Text>Button</Text></View>
        <View style={{width:100,height:30}}><Text>Button</Text></View>
        <View style={{width:100,height:30}}><Text>Button</Text></View>
        <View style={{width:100,height:30}}><Text>Button</Text></View>
        <View style={{width:100,height:30}}><Text>Button</Text></View>
    </ScrollView>
  </View>
</View>  

我无法在评论中插入图片。因此，添加作为答案。