当键盘在react-native中打开时，ScrollView无法滚动到底部。[IOS]
当键盘在react-native中打开时，ScrollView无法滚动到底部。[IOS]
提问于 2021-02-01 13:02:45
当键盘关闭时，Scrollview工作正常。但当键盘打开时，它不会滚动到底部。不过，它在Android上运行得很好。问题只与iOS有关。
如果我使用react-native-keyboard-aware-scroll-view，那么问题就解决了，但是我不想使用这个包。
我的工作环境：
世博会sdk :- 40
平台:- IOS
import React from "react";
import {
ScrollView,
TextInput,
SafeAreaView,
TouchableOpacity,
Text,
} from "react-native";
function App() {
return (
<SafeAreaView style={{ flex: 1 }}>
<ScrollView style={{ flex: 1 }}>
<TextInput style={{ borderWidth: 2, height: 50, marginVertical: 10 }} />
<TextInput style={{ borderWidth: 2, height: 50, marginVertical: 10 }} />
<TextInput style={{ borderWidth: 2, height: 50, marginVertical: 10 }} />
<TextInput style={{ borderWidth: 2, height: 50, marginVertical: 10 }} />
<TextInput style={{ borderWidth: 2, height: 50, marginVertical: 10 }} />
<TextInput style={{ borderWidth: 2, height: 50, marginVertical: 10 }} />
<TextInput style={{ borderWidth: 2, height: 50, marginVertical: 10 }} />
<TextInput style={{ borderWidth: 2, height: 50, marginVertical: 10 }} />
<TextInput style={{ borderWidth: 2, height: 50, marginVertical: 10 }} />
<TextInput style={{ borderWidth: 2, height: 50, marginVertical: 10 }} />
<TextInput style={{ borderWidth: 2, height: 50, marginVertical: 10 }} />
<TextInput style={{ borderWidth: 2, height: 50, marginVertical: 10 }} />
<TextInput style={{ borderWidth: 2, height: 50, marginVertical: 10 }} />
<TextInput style={{ borderWidth: 2, height: 50, marginVertical: 10 }} />
<TouchableOpacity
style={{ height: 50, backgroundColor: "red", marginVertical: 10 }}
>
<Text>Button</Text>
</TouchableOpacity>
</ScrollView>
</SafeAreaView>
);
}
export default App;回答 1
Stack Overflow用户
发布于 2021-02-01 15:12:47
您可以使用KeyboardAwareScrollView，如下所示：
<KeyboardAwareScrollView keyboardShouldPersistTaps={'always'}
style={{flex:1}}
showsVerticalScrollIndicator={false}>
{/* Your code goes here*/}
</KeyboardAwareScrollView>另外，我使用样式表，而不是每次都添加文本输入的样式，这是一个示例：
import {StyleSheet} from 'react-native
function App() {
return (
<SafeAreaView style={{ flex: 1 }}>
<TextInput style={styles.textInput} />
<TextInput style={styles.textInput} />
<TextInput style={styles.textInput} />
</SafeAreaView>
);
}
const styles = StyleSheet.create({
textInput: {
borderWidth: 2,
height: 50,
marginVertical: 10
});如果你想了解更多关于KeyboardAwareScrollView的信息，你可以访问这里：https://github.com/APSL/react-native-keyboard-aware-scroll-view
有关样式表的更多信息，请访问：https://reactnative.dev/docs/stylesheet
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65987405
复制相关文章
相似问题
腾讯云开发者
