无法在 scrollView 中滚动

Question

我有一个屏幕，我可以在其中输入内容并获得相应的搜索结果。该列表在 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,
  },

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

Answer 1

我可以想到三种解决方案（你可以尝试其中一种）：

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

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

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

3-在第一个解决方案中，您可以像这样使用空标签而不是视图：

<> 
</>

Answer 2

如果您的问题只是键盘打开，那么您可能想看看 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;

Answer 3

我针对你的问题做了一个 expo snack 并检查了它。我想我解决了。看看它：

This is the link to the expo snack

描述一下：

正如我发现的那样，您的问题是 ScrollView 在任何情况下都没有改变高度，即使提供更多 height 或提供 paddingBottom.[=27= 也是如此]

所以我将 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 的样式移出 class 组件并将其放置在 styles 对象中，因为 keyboardHeight 是一个state，在组件内部就可以知道

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

希望这能解决您的问题。

编辑功能组件

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

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。您可以查看它以查看工作示例。

Answer 4

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

在高度大于屏幕的视图中包裹 ScrollView 也可以。

Answer 5

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

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

2)通过调整高度，maxHeight属性和flex属性

如果它对你有用，请告诉我

Answer 6

只要改变ScrollView的样式，尝试给定高度就可以了，然后你就可以根据标准给定高度了android。

无法在 scrollView 中滚动

unable to scroll in scrollView

javascript

css

uiscrollview

reactjs

react-native