无法在scrollView中滚动

编程问答 2022-08-16

问题描述

我有一个屏幕，在该屏幕上输入字段并相应地获取搜索结果。该列表在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),});

enter image description here

我已经尝试添加 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％，则根本无法滚动。

解决方法

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

This is the link to the expo snack

对此进行描述：

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

所以我将ScrollView包裹在View标记中，并为其指定了样式： 

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

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

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

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

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

编辑功能组件

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

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

,

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

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

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

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

在第一种解决方案中，您可以像下面这样使用空标签代替View：

<> 
</>
,

如果您的问题仅在于打开键盘，则您可能需要看看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;
,

我认为，如果您的ScrollView内容小于屏幕，它将不会滚动。因此，您可以尝试将高度设置为“ 150％”或类似高度，或者添加一个具有高度的空视图以将ScrollView拉伸到高于屏幕的水平。

在具有高度的视图中包装ScrollView>屏幕也将起作用。

,

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

docker logs

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

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

javascriptreact-nativereactjsreactjsuiscrollview