Question

对于我的应用，我需要ScrollView组件垂直和水平滚动。我搜索了很多但是，无法解决问题。尝试directionLockEnabled，没有用。 contentContainerStyle不是这样，因为我的行和列数是动态的，它可能会向两个方向扩展。我相信应该有一些方法让ScrollView向两个方向滚动。

以下是DataGrid中的ScrollView图片

以下是dataGrid（ScrollView）

中的react-native-easy-grid代码

 <Grid style={{ width: width - 20, height: height / 2 }}>
<ScrollView
    horizontal={true}
    style={{
        height: height / 2,
        width: width - 20,
        marginLeft: 20,
        borderWidth: 1,
        borderColor: "#D3D3D3"
    }}
>
    <Col style={{ width: 200 }}>
        <Row
            style={{
                borderWidth: 1,
                borderColor: "#D3D3D3",
                height: 80,
                alignItems: "center"
            }}
        >
            <Text>{this.state.Wholesaler}</Text>
        </Row>
        {this.state.dataGrid.map((person, i) => {
            return (
                <Row
                    key={i}
                    style={{
                        borderWidth: 1,
                        borderColor: "#D3D3D3",
                        height: 50,
                        alignItems: "center"
                    }}
                >
                    <Text>{person.name}</Text>
                </Row>
            );
        })}
    </Col>
    <Col style={{ width: 200 }}>
        <Row
            style={{
                height: 40,
                alignItems: "center",
                justifyContent: "center",
                borderWidth: 1,
                borderColor: "#D3D3D3"
            }}
        >
            <Text>Operator</Text>
        </Row>
        <Row style={{ height: 40 }}>
            <Col
                style={{
                    borderWidth: 1,
                    borderColor: "#D3D3D3",
                    alignItems: "center"
                }}
            >
                <Text>Target</Text>
            </Col>
            <Col
                style={{
                    borderWidth: 1,
                    borderColor: "#D3D3D3",
                    alignItems: "center"
                }}
            >
                <Text>Actual</Text>
            </Col>
            <Col
                style={{
                    borderWidth: 1,
                    borderColor: "#D3D3D3",
                    alignItems: "center"
                }}
            >
                <Text>%</Text>
            </Col>
        </Row>
        {this.state.dataGrid.map((person, i) => {
            return (
                <Row key={i} style={{ height: 50 }}>
                    <Col
                        style={{
                            justifyContent: "center",
                            borderWidth: 1,
                            borderColor: "#D3D3D3",
                            alignItems: "center"
                        }}
                    >
                        <Text>{person.OperatorTarget}</Text>
                    </Col>
                    <Col
                        style={{
                            justifyContent: "center",
                            borderWidth: 1,
                            borderColor: "#D3D3D3",
                            alignItems: "center"
                        }}
                    >
                        <Text>{person.OperatorActual}</Text>
                    </Col>
                    <Col
                        style={{
                            justifyContent: "center",
                            borderWidth: 1,
                            borderColor: "#D3D3D3",
                            alignItems: "center"
                        }}
                    >
                        <Text>{person.OperatorPercent}</Text>
                    </Col>
                </Row>
            );
        })}
    </Col>
    <Col style={{ width: 200 }}>
        <Row
            style={{
                height: 40,
                alignItems: "center",
                justifyContent: "center",
                borderWidth: 1,
                borderColor: "#D3D3D3"
            }}
        >
            <Text>Lead</Text>
        </Row>
        <Row style={{ height: 40 }}>
            <Col
                style={{
                    borderWidth: 1,
                    borderColor: "#D3D3D3",
                    alignItems: "center"
                }}
            >
                <Text>Target</Text>
            </Col>
            <Col
                style={{
                    borderWidth: 1,
                    borderColor: "#D3D3D3",
                    alignItems: "center"
                }}
            >
                <Text>Actual</Text>
            </Col>
            <Col
                style={{
                    borderWidth: 1,
                    borderColor: "#D3D3D3",
                    alignItems: "center"
                }}
            >
                <Text>%</Text>
            </Col>
        </Row>
        {this.state.dataGrid.map((person, i) => {
            return (
                <Row key={i} style={{ height: 50 }}>
                    <Col
                        style={{
                            justifyContent: "center",
                            borderWidth: 1,
                            borderColor: "#D3D3D3",
                            alignItems: "center"
                        }}
                    >
                        <Text>{person.LeadTarget}</Text>
                    </Col>
                    <Col
                        style={{
                            justifyContent: "center",
                            borderWidth: 1,
                            borderColor: "#D3D3D3",
                            alignItems: "center"
                        }}
                    >
                        <Text>{person.LeadActual}</Text>
                    </Col>
                    <Col
                        style={{
                            justifyContent: "center",
                            borderWidth: 1,
                            borderColor: "#D3D3D3",
                            alignItems: "center"
                        }}
                    >
                        <Text>{person.LeadPercent}</Text>
                    </Col>
                </Row>
            );
        })}
    </Col>
</ScrollView>
</Grid>;

Answer 1

我从GitHub上的一个问题中找到了这个东西。您可以使用两个滚动视图。一个用于水平，另一个用于垂直。

<ScrollView>
    <ScrollView horizontal>
          .....
    </ScrollView>
<ScrollView>

Answer 2

水平ScrollView从左向右滚动组件和视图。可以通过将props水平设置为true（horizontal = {true}）来实现

<ScrollView  horizontal={true}> 
      ....your code 
  </ScrollView>

React-Native ScrollView垂直和水平滚动

2 个答案: