Question

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

我该如何解决？

这是呈现滚动视图的组件。

export const LocationsFound: React.FunctionComponent<LocationsFoundProps> = ({
  addressesFound,
}) => {

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

这是调用LocationsFound组件的组件。

return (
    <SafeAreaView style={styles.safeAreaViewContainer}>
      <View style={styles.container}>

        <View style={styles.searchFieldContainer}>
          <AddressSearchInput
            addressType="favouritePoint"
            placeholder="Ort eingeben"
          />
        </View>
        <View style={styles.dropdown}>
          <LocationsFound
            addressesFound={locations.addressesFoundList}

          />
        </View>


      </View>
    </SafeAreaView>
  );
};

export const styles = StyleSheet.create({
  safeAreaViewContainer: {
    flex: 1,
  },
  container: {
    height: '100%',
    backgroundColor: 'white',
    width: '100%',
    display:"flex",
  flexDirection:"column",
flex: 1
  },

  dropdown: {
    position: 'absolute',
    top: moderateScale(215),
    zIndex: moderateScale(10),
    backgroundColor: '#fff',
   flex: 1
  },
});

我也尝试添加

onScrollBeginDrag={Keyboard.dismiss}

但这没什么区别。

Answer 1

听起来像是高处，发出问题，没有所有代码，没有人会不加推测就给出清晰的答案。键盘无法缩小视图，请签出此包装，可能会有帮助-https://github.com/APSL/react-native-keyboard-aware-scroll-view

打开键盘时滚动

1 个答案: