реагируют нативный таблицу GridView

Question

как построить таблицу GridView в реагировать родной, как на рисунке или в фрагменте кода

<table border=1> 
 
    <tr> 
 
    <th>Firstname</th> 
 
    <th>Lastname</th> 
 
    <th>Age</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Jill</td> 
 
    <td>Smith</td> 
 
    <td>50</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Eve</td> 
 
    <td>Jackson</td> 
 
    <td>94</td> 
 
    </tr> 
 
</table>

Answer 1

import React from 'react'; 
import { 
    registerComponent, 
} from 'react-native-playground'; 
import { 
    StatusBar, 
    StyleSheet, 
    Text, 
    View, 
} from 'react-native'; 

class App extends React.Component { 
    render() { 
    return (
     <View> 
     <View style={{height:50,flexDirection:'row',flex:1,borderWidth:1,padding:2,justifyContent:'space-around'}}> 
         <View style={{flex:1,borderWidth:1,alignItems:'center',justifyContent:'center'}}> 
         <Text>Jill</Text> 
       </View> 
       <View style={{flex:1,borderWidth:1,alignItems:'center',justifyContent:'center'}}> 
         <Text>Smith</Text> 
       </View> 
       <View style={{flex:1,borderWidth:1,alignItems:'center',justifyContent:'center'}}> 
         <Text>50</Text> 
       </View> 
     </View> 
     <View style={{height:50,flexDirection:'row',flex:1,borderWidth:1,padding:2,justifyContent:'space-around'}}> 
         <View style={{flex:1,borderWidth:1,alignItems:'center',justifyContent:'center'}}> 
         <Text>Eve</Text> 
       </View> 
       <View style={{flex:1,borderWidth:1,alignItems:'center',justifyContent:'center'}}> 
         <Text>Jackson</Text> 
       </View> 
       <View style={{flex:1,borderWidth:1,alignItems:'center',justifyContent:'center'}}> 
         <Text>94</Text> 
       </View> 
     </View> 
     <View style={{height:50,flexDirection:'row',flex:1,borderWidth:1,padding:2,justifyContent:'space-around'}}> 
         <View style={{flex:1,borderWidth:1,alignItems:'center',justifyContent:'center'}}> 
         <Text>First Name</Text> 
       </View> 
       <View style={{flex:1,borderWidth:1,alignItems:'center',justifyContent:'center'}}> 
         <Text>Last Name</Text> 
       </View> 
       <View style={{flex:1,borderWidth:1,alignItems:'center',justifyContent:'center'}}> 
         <Text>Age</Text> 
       </View> 
     </View> 
     </View> 
    ); 
    } 
} 
registerComponent(App); 

Вот рабочий код https://rnplay.org/apps/e3MZAw

Answer 2

Вы можете использовать компонент ListView, первая строка будет вашим заголовком (renderHeader), другие - это строки (renderRow).

Как строка, так и заголовок будут представлять собой один и тот же компонент, содержащий родителя View с flexDirection: 'row' с компонентами 4 Text. Каждый компонент Text будет иметь flex: 1, если вы хотите, чтобы они имели одинаковую ширину.