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

使用柔性盒造型非常容易实现。如果你是React-native的新手。 Listview在初看起来有点令人生畏（Datasource，它与克隆行有什么关系{rowHasChanged：（r1，r2）=＆gt; 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>

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

React Native Grid视图显示比较表

3 个答案: