无法在scrollView中滚动 [英] unable to scroll in scrollView

问题描述

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

I have a screen where I type in the input field and get search results accordingly. The list is rendered within a ScrollView but it still doesn't let me scroll when the keypad is open (in 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),
  },
});

I已经尝试添加 nestedScrollEnabled = {true} ，但这没有什么区别。

I have already tried adding nestedScrollEnabled={true} but it makes no difference.

在这里，上述组件被称为：

This is where the above mentioned component is called:

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

我尝试添加高度：<％c $ c>下拉列表的80％。这样就可以滚动一点。但是，当键盘打开时，我可以滚动但不能滚动到末尾。如果我增加高度：100％，我根本无法滚动。

I tried adding height: 80% to dropdown. This makes it possible to scroll a bit. However, when the keypad is open I can scroll but not to the end. If I add height: 100%, I am not able to scroll at all.

推荐答案

我为您的问题做了一个博览会小吃并检查了它。我想我解决了。看看：

I made an expo snack for your problem and examined it. I think I solved it. take a look at it:

这是博览会小吃的链接

对此进行描述：

我发现，您的问题是 ScrollView 在任何情况下都不会改变高度，即使给出更多的 height 或给出 paddingBottom 。

As I found out, your problem was that the ScrollView wasn't changing height in any situations, even by giving more height or giving paddingBottom.

所以我将 ScrollView 包裹在中查看标记并为其指定样式：

so I wrapped the ScrollView in a View tag and gave this styling to it:

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

在此样式中，您会看到参数 keyboardHeight ，它是我在<$ c $中设置的状态 c> componentDidMount ，其代码如下：

In this styling, you see parameter keyboardHeight, which is a state that I'm setting in the componentDidMount with below codes:

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 是状态，就可以在组件内部知道它。

I have to mention that you cannot move the style of paddingBottom: 1.3*keyboardHeight outside of the class component and place it in styles object, because the keyboardHeight is a state, it can be known just inside the component.

我建议您看一下我在博览会小吃中的代码，以更好地理解我的描述。

I suggest you to take a look at my code in expo snack to understand my descriptions better.

我希望这可以解决您的问题。

I hope this solve your problem.

编辑功能组件

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

use below code to detect keyboard height while writing functional components:

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)
};

我编辑了博览会小吃。您可以查看它以查看工作示例。

I edited the expo snack too. you can take a look at it to see a working example.

这篇关于无法在scrollView中滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！