键盘打开时滚动答案

【问题标题】：scroll when the keypad is open键盘打开时滚动
【发布时间】：2020-12-06 16:00:24
【问题描述】：

在我的屏幕上，我输入输入字段并获得相应的搜索结果。该列表在 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}

但这并没有什么不同。

【问题讨论】：

你在所有父视图和滚动视图上都有flex: 1吗？
是的，我已经尝试在任何地方添加 flex:1 ，但这并没有什么不同。 @EricHasselbring

标签： javascript css reactjs typescript react-native

【解决方案1】：

听起来像一个高度，问题，没有所有代码，没有人会在没有猜测的情况下给出明确的答案。键盘不会缩小视图，看看这个包，它可能会有所帮助 - https://github.com/APSL/react-native-keyboard-aware-scroll-view

【讨论】：

我也试过了，但还是不能滚动。我在我的 qs 中添加了更多代码，你能看一下吗？