React-Native ScrollView 垂直和水平滚动答案

【问题标题】：React-Native ScrollView scrolling both vertically and horizontallyReact-Native ScrollView 垂直和水平滚动
【发布时间】：2018-02-27 08:56:48
【问题描述】：

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

这是我在 DataGrid 中的ScrollView 图片

这是我在 dataGrid(react-native-easy-grid) 中的 ScrollView 代码

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

【问题讨论】：

标签： react-native scroll react-native-scrollview

【解决方案1】：

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

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

【讨论】：

我也尝试过嵌套的 ScrollView。但是，它对我不起作用。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您始终可以根据需要多次使用<ScrollView>，并且可以在<View> 或<WebView> 之前指定是水平的还是垂直的

例子：

<ScrollView>
    <ScrollView horizontal>
        <View>
            <WebView (your code) />
        </View>
    </ScrollView>
</ScrollView>

【讨论】：