Режим прокрутки с поддержкой клавиатуры занимает место на экране

Question

Я использую React Native Scroll View для работы с клавиатурой в моем макете приложения, он отлично работает, но добавляет дополнительные «отступы» или пробелы под моими компонентами.

Он уже имеет стиль flex: 1, чтобы занять все пространство экрана. Вот код jsx для App.js

    <PaperProvider>
      <StatusBar
        barStyle="dark-content"
        hidden={false}
        backgroundColor="#00BCD4"
        translucent={true}
      />
      <KeyboardAwareScrollView
        style={{ flex: 1 }}
      >
        <View style={styles.container}>
          <UnitCard />
          <UnitCard />
          <Converter />
        </View>
      </KeyboardAwareScrollView>
    </PaperProvider>
  );
};

const styles = StyleSheet.create({
  container: {
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    flex: 1,
    backgroundColor: "#eee",
  },
  cards: {
    flex: 1,
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
  },
});

Answer 1

Кажется, работал со следующим кодом.

<KeyboardAwareScrollView
        style={{ backgroundColor: "#4c69a5" }}
        resetScrollToCoords={{ x: 0, y: 0 }}
        contentContainerStyle={styles.container}
        scrollEnabled={false}
        style={{ height: Dimensions.get("window").height }}
        automaticallyAdjustContentInsets={false}
      >
... components
<KeyboardAwareScrollView/>

Взято из https://medium.com/free-code-camp/how-to-make-your-react-native-app-respond-gracefully-when-the-keyboard-pops-up-7442c1535580

Answer 2

Я не думаю, что flex:1 будет работать в вашем KeyboardAwareScrollView или событии по умолчанию в React Native ScrollView

Если вы хотите, чтобы он обернул всю высоту вашего экрана, мое предложение:

const SCREEN_HEIGHT = Dimensions.get("screen").height;

<KeyboardAwareScrollView
    style={{ height: SCREEN_HEIGHT }}
>
....