页面在每次输入模糊时滚动到顶部

Pio*_*ura 1 javascript reactjs react-native native-base expo

我正在开发一个react-native使用Expo和的简单应用程序native-base。我偶然发现了一个问题,我在任何文档中都找不到任何相关信息。

当我模糊任何文本输入、textarea 等时,页面总是快速滚动到顶部。它只发生在iOS上,在Android上没有这样的问题。

如果在我之前问过这个问题,我真的很感激一些线索,我做错了什么。

我正在使用以下软件包:

"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react": "16.5.0",
"expo": "32.0.0",
"native-base": "^2.12.0"
Run Code Online (Sandbox Code Playgroud)

我的应用程序中的每个页面都包含以下组件:

import React from "react";
import { StyleSheet } from "react-native";
import { Container, Content } from "native-base";

const SceneWrapper = ({ Layout, bigTopPadding, ...props }) => {
  return (
    <Container style={styles.container} >
      <Content style={styles.content} keyboardDismissMode="interactive">
        <Layout {...props} />
      </Content>
    </Container>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: "white",
    flex: 1,
    alignItems: "flex-start",
    justifyContent: "flex-start"
  },
  content: {
    padding: 20,
    flex: 1,
    width: "100%",
    height: "100%",
  }
});
Run Code Online (Sandbox Code Playgroud)

我几乎 100% 确定<Content>组件在这里有问题,但我不明白为什么以及我应该改变什么来防止这种情况发生。我所知道的是这keyboardDismissMode不会导致这个问题,因为它发生在我添加这个道具之前。

Pio*_*ura 6

对于任何有同样问题的人,我设法找到了解决方案。

我通过将enableResetScrollToCoords={false}prop添加到<Content>.