无法在 scrollView 中滚动

Posted 2023-03-06

【中文标题】无法在 scrollView 中滚动

【英文标题】：unable to scroll in scrollView

【发布时间】：2020-12-05 18:53:08

【问题描述】：

我有一个屏幕，我在其中输入输入字段并获得相应的搜索结果。该列表在 ScrollView 中呈现，但当键盘打开时（在 android 中）它仍然不允许我滚动。

我该如何解决这个问题？

  return (
    <>
      addressesFound.length > 0 ? (
        <ScrollView
          style=styles.searchResultsContainer
          keyboardShouldPersistTaps='always'
          keyboardDismissMode='on-drag'>
          addressesFound.map((addressDetails: addressDetailsType) => 
            return (
              <View
                key=addressDetails.placeName
                style=styles.resultContainer>
                <Text
                  style=styles.text>
                  addressDetails.placeName
                </Text>
              </View>
            );
          )
        </ScrollView>
      ) : null
    </>
  );
;
const styles = StyleSheet.create(
  searchResultsContainer: 
    width: moderateScale(400),
    paddingHorizontal: moderateScale(50),
    paddingRight: moderateScale(65),
    marginTop: moderateScale(10),
   flex:1,
  ,
  resultContainer: 
    marginTop: moderateScale(10),
    borderBottomWidth: 1,
    borderBottomColor: 'grey',
  ,
  text: 
    fontSize: moderateScale(15),
  ,
);

我已经尝试添加 nestedScrollEnabled=true，但没有任何区别。

这是调用上述组件的地方：

        <View style=styles.dropdown>
          <LocationsFound
            addressesFound=locations.addressesFoundList />
....
  dropdown: 
    position: 'absolute',
    top: moderateScale(215),
    zIndex: moderateScale(10),
    backgroundColor: '#fff',
    flex: 1,
  ,

我尝试将 height: 80% 添加到 dropdown。这使得可以滚动一点。但是，当键盘打开时，我可以滚动但不能滚动到最后。如果我添加 height: 100%，我根本无法滚动。

【参考方案1】：

我为您的问题制作了一份博览会小吃并进行了检查。我想我解决了。看看吧：

This is the link to the expo snack

描述一下：

我发现，您的问题是 ScrollView 在任何情况下都没有改变高度，即使提供更多 height 或提供 paddingBottom。

所以我将ScrollView 包装在View 标记中，并赋予它以下样式：

scrollViewWrapper: 
     width: '100%',
     minHeight: '100%',
     paddingBottom: 1.3*keyboardHeight
 

在此样式中，您会看到参数keyboardHeight，这是我在componentDidMount 中设置的state，代码如下：

import Keyboard from 'react-native';
 
state = 
  keyboardHeight: 0,


componentDidMount() 
this.keyboardDidShowListener = Keyboard.addListener(
  'keyboardDidShow',
  this._keyboardDidShow
);
this.keyboardDidHideListener = Keyboard.addListener(
  'keyboardDidHide',
  this._keyboardDidHide
 );

_keyboardDidShow = (e) => 
  this.setState(
    keyboardHeight: e.endCoordinates.height,
  );
;

不得不提的是，不能将paddingBottom: 1.3*keyboardHeight的样式移到类组件之外，放到styles对象中，因为keyboardHeight是state，只能在组件内部知道.

我建议你看一下我在 expo snap 中的代码，以更好地理解我的描述。

希望这能解决你的问题。

功能组件编辑

在编写功能组件时使用以下代码检测键盘高度：

const [keyboardHeight, setKeyboardHeight] = useState(0)
const [scrollViewVisibility, setScrollViewVisibility] = useState(false)
useEffect(() => 
  Keyboard.addListener("keyboardDidShow", _keyboardDidShow);

  // cleanup function
  return () => 
    Keyboard.removeListener("keyboardDidShow", _keyboardDidShow);
  ;
, []);
const _keyboardDidShow = (e) => 
  console.log("============in keyboardDidShow")
  setKeyboardHeight(e.endCoordinates.height)
;

我也编辑了expo snack。您可以查看它以查看一个工作示例。

【讨论】：

能否根据功能组件进行修改？对于 state，我们可以使用 useState，对于 componentDidMount，我们可以使用 useEffect，但我无法弄清楚如何替换 this.keyboardDidShowListener 。

另外，我无法真正评价你们的零食博览会，因为它与我的有点不同。就我而言，一旦显示列表，键盘仍处于打开状态。但是，在您的博览会中，当我搜索显示列表时，键盘会消失。

@Jnl 我修改了世博小吃并为此解决方案编写了一个编辑。看看这个。关于我的代码和你的代码之间的区别，是的，有一些区别，但我想你已经在网络模式下检查了我的零食，在 iPhone 模式下检查它。你会发现它和你的很相似。

如果我向我的dropdown View添加一个额外的 height:'80%' 这有点工作，这是整个 LocationsFound 列表组件的父级。是否也可以在 LocationsFound 中移动高度样式？这样可以在不同的屏幕上自动计算。

My LocationFound 就像您的博览会一样，只是去掉了最顶部的容器 View 和 TextInput。如果我不单独将高度添加到下拉列表中，它不会滚动。

【参考方案2】：

我认为如果您的 ScrollView 内容小于屏幕，它不会滚动。因此，您可以尝试制作 height: "150%" 或类似的东西，或者添加一个具有高度的空视图，以将 ScrollView 拉伸到高于屏幕的高度。

将 ScrollView 包裹在具有高度的视图中 > 屏幕也可以工作。

【讨论】：

如果我用另一个 View <View style=height: "auto", maxHeight: screenHeight*2> 包装 ScrollView，呈现的列表只是一个缺少内容的普通视图。我也尝试将height: "150%"添加到searchResultsContainer，但没有任何区别

【参考方案3】：

我认为您可以按照以下提示解决此问题： 1）调整ScrollView标签位置很可能它会直接在>内超出您的条件或添加视图标签，在ScrollView标签上方，如

<><View style= Height: "auto", maxHeight: screenHeight><ScrollView>....</ScrollView></view></>

2)通过调整height、maxHeight属性和flex属性

如果对你有用，请告诉我

【讨论】：

条件是必要的。如果我用另一个 View <View style=height: "auto", maxHeight: screenHeight> 包装 ScrollView，则呈现的列表只是一个缺少内容的普通视图。

我究竟可以尝试什么来“调整高度/最大高度”以及在哪里？将其添加到dropdown没有用。

【参考方案4】：

我能想到三种解决方案（你可以尝试任何一种）：

1-尝试将滚动视图包裹在 flex=1 的视图标签内，如下所示：

<View style= flex:1 >
<ScrollView>
</ScrollView>
</View>

2-如果不想使用视图，可以将 ScrollView flex 设置为 1

3-in 第一个解决方案，您可以使用空标签而不是 View，如下所示：

<> 
</>

【讨论】：

不幸的是，没有一个对我有用。另外，我的退货单里已经有一个空标签了。

你试过用 flatlist 代替 scorllview 吗？

不，至少现在还没有。我在 qs 中添加了更多信息

【参考方案5】：

如果您的问题仅在于键盘打开，那么您可能需要查看KeyboardAvoidingView

我遇到了很多问题！你想尝试所有的道具behavior 的设置。可能有一个适合你！

从他们的例子中：

import React from 'react';
import  View, KeyboardAvoidingView, TextInput, StyleSheet, Text, Platform, 
TouchableWithoutFeedback, Button, Keyboard   from 'react-native';

const KeyboardAvoidingComponent = () => 
   return (
     <KeyboardAvoidingView
       behavior=Platform.OS == "ios" ? "padding" : "height"
       style=styles.container
     >
       <TouchableWithoutFeedback onPress=Keyboard.dismiss>
         <View style=styles.inner>
           <Text style=styles.header>Header</Text>
           <TextInput placeholder="Username" style=styles.textInput />
           <View style=styles.btnContainer>
             <Button title="Submit" onPress=() => null />
           </View>
         </View>
       </TouchableWithoutFeedback>
     </KeyboardAvoidingView>
   );
 ;

 const styles = StyleSheet.create(
   container: 
     flex: 1
   ,
   inner: 
     padding: 24,
     flex: 1,
     justifyContent: "space-around"
   ,
   header: 
     fontSize: 36,
     marginBottom: 48
   ,
   textInput: 
     height: 40,
     borderColor: "#000000",
     borderBottomWidth: 1,
     marginBottom: 36
   ,
   btnContainer: 
     backgroundColor: "white",
     marginTop: 12
   
 );

 export default KeyboardAvoidingComponent;

【参考方案6】：

只需更改 ScrollView 的样式，尝试给定高度，它会起作用，然后您可以根据标准 android 给定高度。

【讨论】：

嗨@jozem，您正在回答一个老问题，似乎您的回答并没有增加太多关于其他问题的信息。请考虑扩展您的观点