Реагировать Native вид сетки, чтобы показать сравнительную таблицу

Question

Использование реагировать родной, как я могу построить сравнительную таблицу, которая выглядит как https://www.edrawsoft.com/templates/images/smart-phone-comparison-table.png

Я также хочу иметь заголовок раздела, если это возможно. Например, цена не в своей колонке, но похож на заголовок таблицы раздела в прошивкой мнение Список даст мне один столбец, но я хочу несколько столбцов

Благодаря

EDIT: Ниже код работает, но проблема в том, что если я прокручиваю по горизонтали, тогда прокручивается только одно представление списка. Я хочу, чтобы они оба прокручивали. (Я в основном пытаюсь сделать строки и столбцы, как 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) => 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

<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> 

Я не могу вставить изображение в комментарий. Итак, добавив в качестве ответа.

Answer 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 

Надеется, что это помогает :)