Question

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

当我模糊任何文本输入，文本区域等时，页面总是快速滚动到顶部。它仅在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"

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

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%",
  }
});

我几乎100％确信<Content>组件在这里有问题，但是我不知道为什么以及应该更改哪些内容以防止这种情况。我所知道的是keyboardDismissMode不会引起此问题，因为它是在我添加此道具之前发生的。

Answer 1

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

我通过在enableResetScrollToCoords={false}上添加<Content>道具来解决这个问题。

Answer 2

您可以创建一个函数l，该函数将在任何输入模糊时被调用。在函数内部只需调用此方法window.scrollTo(0,0)

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

2 个答案: