Listview 反应本机网格视图以显示比较表

使用react native如何构建一个比较表

如果可能的话，我还希望有一个节标题。价格不在它自己的列中，但类似于iOS中的表节标题 列表视图将为我提供一列，但我需要多列

谢谢

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

render（）{
返回(
)

---

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

---

使用flex box样式可以很容易地实现这一点。如果你是新手，对本机做出反应。Listview乍一看有点让人望而生畏（数据源，克隆行{rowHasChanged:（r1，r2）=>r1！==r2}）？）。为了保持简单和更好地理解flex box，这应该可以完成你的工作。但更推荐Listview。

import React，{Component}来自'React'；
从“react native”导入{AppRegistry、View、ListView、样式表、Text}；
类示例扩展组件{
render（）{
返回(
方框1
方框2
方框3
{/*
使用flex box样式可以很容易地实现这一点。如果您是新手，对本机进行反应。Listview乍一看有点令人生畏（数据源，克隆行{rowHasChanged:（r1，r2）=>r1！==r2}）？）。为了保持它的简单性和更好地理解flex box，这应该可以完成您的工作。但更推荐使用Listview。

import React，{Component}来自'React'；
从“react native”导入{AppRegistry、View、ListView、样式表、Text}；
类示例扩展组件{
render（）{
返回(
方框1
方框2
方框3
{/*


按钮
按钮
按钮
按钮
按钮
按钮
按钮
按钮
按钮
按钮
按钮
按钮
按钮
按钮

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

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


按钮
按钮
按钮
按钮
按钮
按钮
按钮
按钮
按钮
按钮
按钮
按钮
按钮
按钮

我无法在注释中插入图像。因此，添加作为答案。
import React，{Component}来自'React'；
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

进口{
评估学，
样式表，
文本，
看法
卷轴视图
}从“反应本机”；
类MultiScroll扩展组件{
render（）{
var tableData=[]
对于（i=0；i<90；i++）{
表格数据推送（[“行”+i+“项目1”、“行”+i+“项目2”、“行”+i+“项目3”、“行”+i+“项目4”、“行”+i+“项目5”、“行”+i+“项目6”、“行”+i+“项目7”、“行”+i+“项目8”、“行”+i+“项目9”、“行”+i+“项目10”]））
}
返回(
{
tableData.map（（每个箭头，j）=>{
返回(
{
eachRow.map（（eachItem，i）=>{
返回{eachItem}
})
}
);
})
}
);
}
}
module.exports=MultiScroll


希望这有帮助：）
从'React'导入React，{Component}；
进口{
评估学，
样式表，
文本，
看法
卷轴视图
}从“反应本机”；
类MultiScroll扩展组件{
render（）{
var tableData=[]
对于（i=0；i<90；i++）{
表格数据推送（[“行”+i+“项目1”、“行”+i+“项目2”、“行”+i+“项目3”、“行”+i+“项目4”、“行”+i+“项目5”、“行”+i+“项目6”、“行”+i+“项目7”、“行”+i+“项目8”、“行”+i+“项目9”、“行”+i+“项目10”]））
}
返回(
{
tableData.map（（每个箭头，j）=>{
返回(
{
eachRow.map（（eachItem，i）=>{
返回{eachItem}
})
}
);
})
}
);
}
}
module.exports=MultiScroll


希望这有帮助：）
react native中没有现成的表组件。但是使用ListView绘制它并使用
style={{flex:1，flexDirection:'row'}呈现每一行并不困难
@Takahiro感谢您的评论。我不想硬编码这些值。数据将从服务器提交。我尝试了上面更新的代码，但问题是如果我水平滚动，那么只有一个列表视图将滚动。我希望两个列表视图都滚动。为什么需要多个列表视图？我以为您只需要一个（用于表）。当然，如果您使用的是ListVi，则不需要硬编码这些值
<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>  

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