React Native 第二个 ScrollView 不起作用

Posted 2023-03-12

【中文标题】React Native 第二个 ScrollView 不起作用

【英文标题】：React Native second ScrollView not working

【发布时间】：2020-06-04 11:51:37

【问题描述】：

我的应用是由 react-native(0.62.2) 开发的，并且依赖于 react-native-elements(2.0.0)。一个应用程序的屏幕必须包含两个 ScrollView 元素。第一个 ScrollView 将用于页面滚动，第二个 ScrollView 将用于现有的单词卡。第一个 ScrollView 元素正在工作，但第二个 ScrollView 元素不在卡片元素中滚动。我尝试使用样式 flex:1 的包装视图元素，但没有结果。

<ScrollView>
            // other items ...
            
            wordSetObject.words.length == 0 ? null :
                <Card  title="Existing Words" dividerStyle=marginBottom:0 containerStyle=maxHeight:300>
                    <ScrollView>
                            
                            wordSetObject.words.map((item, index) => 
                                return(
                                <ListItem
                                    key=index
                                    title=item.word 
                                    subtitle=item.meaning
                                    bottomDivider
                                    rightIcon=
                                        <View style=flexDirection:'row'>
                                            <MCIcon
                                            name="pencil"
                                            size=22
                                            />
                                            <MCIcon
                                            name="delete"
                                            size=22
                                            color="red"
                                            onPress=() => onPressDeleteWordButton(index)
                                        />
                                        </View>
                                    
                                    />)
                                 )    
                            
                    </ScrollView>
                </Card>
            
        </ScrollView>

【参考方案1】：

这可以通过在子 Scrollview 上使用 nestedScrollEnabled=true 属性来解决，如下所示：

<ScrollView>
  <ScrollView nestedScrollEnabled=true>
  </ScrollView>
</ScrollView>