ScrollView 内部有 View 组件时无法滚动

Posted 2023-02-16

【中文标题】ScrollView 内部有 View 组件时无法滚动

【英文标题】：ScrollView cannot scroll when having View components inside of it

【发布时间】：2021-12-24 20:58:16

【问题描述】：

我正在使用 React Native： 我有一个在 ScrollView 内部调用的组件：

function SomeScreen()

    return(

        <ScrollView style=myStyles.someStyles>

            <View>
                <Text style=myStyles.homeHeroTitle>Hello Tom</Text>
                <Text>It's great seeing you!</Text>
            </View>


            <View>
                <Text>SomeText</Text>
            </View>
            
            <View>
                <Text>SomeOtherText</Text>
            </View>
    
        </ScrollView>   
    );
    



let myStyles = StyleSheet.create(
   someStyles:
      width: "100%",
      height: "100%",
      
   ,
);

当我在 ScrollView 中调用其他 View 元素时，我无法在 ScrollView 中scroll。

但是，当 ScrollView 内的唯一元素是 Text 元素时，我可以滚动。

【问题讨论】：

你能不能尝试用 > 而不是

替换 ScrollView 中的所有 View 元素

在 ScrollView 的子视图中尝试添加更多数据，或多次复制测试组件，使其填充屏幕的整个高度，然后您可以滚动屏幕。

【参考方案1】：

采用 flex:1 的滚动视图样式，并尝试添加更多文本（添加数据）以进行滚动。

【参考方案2】：

首先，尽量避免 View 太多，因为 Text 也有 View 的属性可以使用。

其次，你可以给 ScrollView 赋予样式

someStyles:
flex:1

这取决于您从哪里导入 ScrollView。是从 react-native 还是 react-native-gesture-handler 导入的？

import  ScrollView  from 'react-native';
import  ScrollView  from 'react-native-gesture-handler';