反应原生Table GridView

Question

如何在图片或代码片段中以原生方式构建表格gridview

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用ListView组件，第一行是您的标题（renderHeader），其他是行（renderRow）。

行和标题都是包含父View且flexDirection: 'row'具有4 Text个组件的同一组件。如果您希望它们具有相同的宽度，则每个Text组件都将具有flex: 1。

Answer 2

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