Блог

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;
 

Вместо этого вы можете использовать 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

Вы можете использовать KeyboardAvoidingView, см. Документ

например:

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