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

【问题标题】：ScrollView cannot scroll when having View components inside of itScrollView 内部有 View 组件时无法滚动
【发布时间】：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 的子视图中尝试添加更多数据，或多次复制测试组件，使其填充屏幕的整个高度，然后您可以滚动屏幕。

标签： javascript reactjs react-native react-native-navigation

【解决方案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';

【讨论】：