在react-native中[Ios]，当键盘打开时，ScrollView无法滚动到底部。

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;

- Binit Chandra Jha

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

- YamiAtem

Answer 2

如果在Android上ScrollView正常工作，但在IOS上出现问题，则可以使用scroll view属性automaticallyAdjustKeyboardInsets={true}。

- Shahzaib Younus

---

你的答案可以通过添加更多的支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便其他人可以确认你的答案是正确的。您可以在帮助中心中找到有关编写好答案的更多信息。 - Community

Answer 3

你可以使用KeyboardAvoidingView，请参阅文档

例如：

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

- Alauddin Ahmed