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

oxf4rvwz  于 2023-03-03  发布在  React
关注(0)|答案(3)|浏览(242)

当键盘关闭时,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;
wqlqzqxt

wqlqzqxt1#

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

mmvthczy

mmvthczy2#

您可以使用键盘避免视图,see the doc
例如:

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

dy1byipe3#

如果ScrollView在Android上运行良好,但在IOS上出现问题,则只需使用滚动视图属性automaticallyAdjustKeyboardInsets= {true}

相关问题