反應本地表的GridView

如何建立表的GridView在圖片或代碼片段反應本地表的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>

來源

2017-02-10 Alfario Eka Putra

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

這裏反應母語一樣的The工作代碼https://rnplay.org/apps/e3MZAw

來源

2017-02-10 12:38:16

如何結合ListView？我需要ListView從其他api獲取數據源 –

您可以使用ListView組件，第一行是您的標題（renderHeader），其他行是（renderRow）。

兩個行和標題都是包含父View 組件的相同組件。如果您希望它們的寬度相同，則每個文本組件都有一個flex: 1。

來源

2017-02-12 17:38:33 binchik

這應該被接受回答，'flex：1'爲我做了詭計。謝謝！ – Noitidart

反應本地表的GridView

回答

相關問題