React-Native ScrollView垂直和水平滚动

时间:2018-02-27 08:56:48

标签: react-native scroll react-native-scrollview

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

以下是DataGrid中的ScrollView图片

enter image description here

以下是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>;

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

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

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