对于我的应用程序，我需要 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>;
最佳答案
我从 GitHub 上的一个问题中发现了这个东西。您可以使用两个 ScrollView 。一个用于水平，另一个用于垂直。
<ScrollView>
<ScrollView horizontal>
.....
</ScrollView>
<ScrollView>
关于React-Native ScrollView 垂直和水平滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49004691/