ScrollView不能滚动到底部时，键盘在react-native.[IOS]打开

Question

当键盘关闭时Scrollview工作正常。但当键盘打开时，它不会滚动到底部。不过，它在Android上运行得很好。这个问题只存在于iOS。

如果我使用react-native-keyboard-aware-scroll-view，那么问题就解决了，但是我不想使用这个包。

工作环境:-

expo 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;

Answer 1

你可以像这样使用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

Answer 2

如果ScrollView在Android上运行良好，在IOS上产生问题，那么只需使用滚动视图属性自动调整keyboardinsets = {true}

Answer 3

你可以使用KeyboardAvoidingView，参见文档

例如:

<KeyboardAvoidingView
style={styles.container}
behavior="padding"
/>