如何在中嵌套水平ScrollViews？
如何在中嵌套水平ScrollViews？
提问于 2019-08-31 00:15:16
我从在Android设备上响应本地嵌套ScrollView不能滚动看到了反应本地提供的嵌套垂直滚动视图
问题是，它似乎不适用于安卓系统上嵌套的水平ScrollViews。有关示例，请参阅此代码：
https://snack.expo.io/@harrytravelchime/broken-horizontal-scroll
import React from 'react';
import _ from 'lodash';
import { View, ScrollView, StyleSheet, Text, SafeAreaView } from 'react-native';
export default class App extends React.PureComponent {
render() {
return (
<SafeAreaView style={styles.container}>
<ScrollView
style={{ height: '100%', width: '100%' }}
horizontal
nestedScrollEnabled
>
<View style={{ flexDirection: 'row' }}>
<ScrollView
style={{ width: 200, height: '100%' }}
horizontal
nestedScrollEnabled
>
<View style={{ flexDirection: 'row' }}>
{_.times(200, n => (
<View key={1000 + n} style={{ marginRight: 10 }}>
<Text>{1000 + n}</Text>
</View>
))}
</View>
</ScrollView>
{_.times(200, n => (
<View key={n} style={{ marginRight: 10 }}>
<Text>{n}</Text>
</View>
))}
</View>
</ScrollView>
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'stretch',
paddingVertical: 50,
},
});另一方面，除了垂直滚动之外，相同的代码完全可以工作：https://snack.expo.io/@harrytravelchime/working-vertical-scroll
有办法使嵌套的水平滚动工作吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-09-03 15:58:42
我想出的一个解决方案是有一个TouchableWithoutFeedback来跟踪用户在内部ScrollView中的任何触摸。一旦检测到触摸，就会禁用外部ScrollView上的滚动，这将导致内部ScrollView接收事件。
对上述代码的主要修改如下：
- 用
outerScrollViewScrollEnabled添加状态 - 当内部ScrollView通过
TouchableWithoutFeedback被触摸时，更改该状态 - 使外部滚动视图的
scrollEnabled依赖于此
import React from "react";
import _ from "lodash";
import {
View,
ScrollView,
StyleSheet,
Text,
SafeAreaView,
TouchableWithoutFeedback
} from "react-native";
interface State {
outerScrollViewScrollEnabled: boolean;
}
export default class App extends React.PureComponent {
state = { outerScrollViewScrollEnabled: true };
handleInnerPressIn = () => this.setState({ outerScrollViewScrollEnabled: false });
handleInnerPressOut = () => this.setState({ outerScrollViewScrollEnabled: true });
render() {
const { outerScrollViewScrollEnabled } = this.state;
return (
<SafeAreaView style={styles.container}>
<ScrollView
style={{ height: "100%", width: "100%" }}
horizontal
scrollEnabled={outerScrollViewScrollEnabled}
>
<View style={{ flexDirection: "row" }}>
<ScrollView style={{ width: 200, height: "100%" }} horizontal>
<TouchableWithoutFeedback
onPressIn={this.handleInnerPressIn}
onPressOut={this.handleInnerPressOut}
>
<View style={{ flexDirection: "row" }}>
{_.times(200, n => (
<View key={1000 + n} style={{ marginRight: 10 }}>
<Text>{1000 + n}</Text>
</View>
))}
</View>
</TouchableWithoutFeedback>
</ScrollView>
{_.times(200, n => (
<View key={n} style={{ marginRight: 10 }}>
<Text>{n}</Text>
</View>
))}
</View>
</ScrollView>
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "column",
justifyContent: "center",
alignItems: "stretch",
paddingVertical: 50
}
});Stack Overflow用户
发布于 2020-06-01 11:56:24
如果您使用的是react本机手势-处理程序，还有一个更简单的解决方案。
import { ScrollView } from 'react-native'
import { ScrollView as GestureHandlerScrollView } from 'react-native-gesture-handler'
<ScrollView horizontal>
<GestureHandlerScrollView horizontal />
</ScrollVIew>我从react本机github问题得到了这个答案。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57734315
复制相关文章
相似问题
腾讯云开发者
