2

对于我的应用程序，我需要ScrollView垂直和水平滚动组件。我搜索了很多，但无法解决。试过了directionLockEnabled，没用。contentContainerStyle不是办法，因为我的行号和列号是动态的，它可能会双向扩展。我相信应该有某种方法可以双向ScrollView滚动。

这是我ScrollView在 DataGrid 中的图片

在此处输入图像描述

这是我ScrollView在 dataGrid( 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>;
4

3 回答 3

1

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

<ScrollView>
    <ScrollView horizontal>
          .....
    </ScrollView>
<ScrollView>
于 2018-02-27T09:08:06.393 回答
0

您可以随时使用 a 任意<ScrollView>多次，并且可以在 the 或 the 之前指定是水平的还是垂直<View>的<WebView>

例子：

<ScrollView>
    <ScrollView horizontal>
        <View>
            <WebView (your code) />
        </View>
    </ScrollView>
</ScrollView>
于 2022-01-09T20:18:24.287 回答
0

水平 ScrollView 从左到右滚动组件和视图。它将通过将 props 水平设置为 true (horizo​​ntal={true}) 来实现

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

于 2020-05-28T06:47:08.280 回答