页面滚动到每个输入模糊的顶部
Page scrolls to top on every input blur
我正在 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
不会导致这个问题,因为它发生在我添加这个 prop 之前。
对于遇到同样问题的任何人,我设法找到了解决方案。
我通过将 enableResetScrollToCoords={false}
属性添加到 <Content>
来解决它。
您可以创建一个函数 l,它将在任何输入模糊时调用。在函数内部调用这个方法 window.scrollTo(0,0)
我正在 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
不会导致这个问题,因为它发生在我添加这个 prop 之前。
对于遇到同样问题的任何人,我设法找到了解决方案。
我通过将 enableResetScrollToCoords={false}
属性添加到 <Content>
来解决它。
您可以创建一个函数 l,它将在任何输入模糊时调用。在函数内部调用这个方法 window.scrollTo(0,0)