时间戳

首页 > 解决方案 > React Native ScrollView 需要很暴力的滚动才能滚动

reactjs - React Native ScrollView 需要很暴力的滚动才能滚动

问题描述

在 Android（可能还有 iOS，我还没有测试过）上，使用 React Native Scrollview 滚动文本存在问题。我正在尝试创建一个文本块组件，该组件可以弯曲以填充页面的剩余空间，并在其中呈现文本。这样可行。

我的问题是该文本需要易于滚动。在我的应用程序中，我无法对此字段中的文本进行细微的滚动调整。（想想在 Instagram 上滚动，您可以以非常小的手势向上或向下滚动）。

滚动视图中的文本不会滚动，除非您快速快速地轻弹它。它确实滚动并且在功能方面正确滚动，用户体验非常糟糕。

除非您大量滚动它，否则就好像它不会被识别为滚动视图。

这发生在普通文本元素被传递到 props.children 时。我只是在文本元素上设置 fontSize 以使文本更大。现在文本字体大小设置为 60，以便我可以测试滚动功能。

这是我的文本块代码：

const TextBlock = (props) => {
    return (
        <View style={{...props.style, ...styles.container}}>
            <ScrollView style={styles.scrollView} contentContainerStyle={{flexGrow: 1}}>
                {props.children}
            </ScrollView>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        backgroundColor: Colors.whiteBackgroundColor,
        paddingHorizontal: 18,
        paddingVertical: 10,
        borderRadius: 20,
        width: '90%',
        flex: 1
    }
});

对此的任何帮助将不胜感激。我已经尝试在内部元素上增加弹性。我尝试将内部文本包装在另一个视图中（有和没有 flex 属性）。我已经尝试完全移除 flex。

请让我知道是否有解决此问题的方法。

标签： reactjsreact-nativereact-native-scrollview

解决方案

推荐阅读