tidak dapat menggulir di scrollView

Aug 16 2020

Saya memiliki layar tempat saya mengetik di kolom input dan mendapatkan hasil pencarian yang sesuai. Daftar ini dirender dalam ScrollView tetapi masih tidak memungkinkan saya menggulir saat keypad terbuka (di Android).

Bagaimana cara memperbaikinya?

  return (
    <>
      {addressesFound.length > 0 ? (
        <ScrollView
          style={styles.searchResultsContainer}
          keyboardShouldPersistTaps={'always'}
          keyboardDismissMode={'on-drag'}>
          {addressesFound.map((addressDetails: addressDetailsType) => {
            return (
              <View
                key={addressDetails.placeName}
                style={styles.resultContainer}>
                <Text
                  style={styles.text}>
                  {addressDetails.placeName}
                </Text>
              </View>
            );
          })}
        </ScrollView>
      ) : null}
    </>
  );
};
const styles = StyleSheet.create({
  searchResultsContainer: {
    width: moderateScale(400),
    paddingHorizontal: moderateScale(50),
    paddingRight: moderateScale(65),
    marginTop: moderateScale(10),
   flex:1,
  },
  resultContainer: {
    marginTop: moderateScale(10),
    borderBottomWidth: 1,
    borderBottomColor: 'grey',
  },
  text: {
    fontSize: moderateScale(15),
  },
});

Saya sudah mencoba menambahkan nestedScrollEnabled = {true} tetapi tidak ada bedanya.

Di sinilah komponen yang disebutkan di atas dipanggil:

        <View style={styles.dropdown}>
          <LocationsFound
            addressesFound={locations.addressesFoundList} />
....
  dropdown: {
    position: 'absolute',
    top: moderateScale(215),
    zIndex: moderateScale(10),
    backgroundColor: '#fff',
    flex: 1,
  },

Saya mencoba menambahkan tinggi: 80% ke dropdown. Ini memungkinkan untuk menggulir sedikit. Namun, ketika keypad terbuka saya dapat menggulir tetapi tidak sampai ke ujung. Jika saya menambahkan tinggi: 100%, saya tidak dapat menggulir sama sekali.

Jawaban

1 MahdiehShavandi Aug 20 2020 at 13:46

Saya membuat makanan ringan pameran untuk masalah Anda dan memeriksanya. Saya pikir saya menyelesaikannya. lihat itu:

Ini adalah link ke snack expo

Untuk menjelaskannya:

Seperti yang saya temukan, masalah Anda adalah bahwa ScrollViewketinggian tidak berubah dalam situasi apa pun, bahkan dengan memberi lebih banyak heightatau memberi paddingBottom.

jadi saya membungkus ScrollViewdalam Viewtag dan memberikan styling ini untuk itu:

scrollViewWrapper: {
     width: '100%',
     minHeight: '100%',
     paddingBottom: 1.3*keyboardHeight
 }

Dalam gaya ini, Anda melihat parameter keyboardHeight, yaitu stateyang saya setel componentDidMountdengan kode di bawah ini:

import {Keyboard} from 'react-native';
 
state = {
  keyboardHeight: 0,
}

componentDidMount() {
this.keyboardDidShowListener = Keyboard.addListener(
  'keyboardDidShow',
  this._keyboardDidShow
);
this.keyboardDidHideListener = Keyboard.addListener(
  'keyboardDidHide',
  this._keyboardDidHide
 );
}
_keyboardDidShow = (e) => {
  this.setState({
    keyboardHeight: e.endCoordinates.height,
  });
};

Saya harus menyebutkan bahwa Anda tidak dapat memindahkan gaya di paddingBottom: 1.3*keyboardHeightluar komponen kelas dan menempatkannya di stylesobjek, karena keyboardHeightadalah a state, itu dapat diketahui hanya di dalam komponen.

Saya menyarankan Anda untuk melihat kode saya di snack expo untuk memahami deskripsi saya dengan lebih baik.

Saya harap ini menyelesaikan masalah Anda.

Edit untuk komponen fungsional

gunakan kode di bawah ini untuk mendeteksi ketinggian keyboard saat menulis komponen fungsional:

const [keyboardHeight, setKeyboardHeight] = useState(0)
const [scrollViewVisibility, setScrollViewVisibility] = useState(false)
useEffect(() => {
  Keyboard.addListener("keyboardDidShow", _keyboardDidShow);

  // cleanup function
  return () => {
    Keyboard.removeListener("keyboardDidShow", _keyboardDidShow);
  };
}, []);
const _keyboardDidShow = (e) => {
  console.log("============in keyboardDidShow")
  setKeyboardHeight(e.endCoordinates.height)
};

Saya juga mengedit snack expo . Anda dapat melihatnya untuk melihat contoh yang berfungsi.

Benyamin Aug 16 2020 at 13:57

Saya dapat memikirkan tiga solusi (Anda dapat mencoba salah satunya):

1-Coba gabungkan tampilan gulir di dalam tag tampilan dengan flex = 1, seperti ini:

<View style={{ flex:1 }}>
<ScrollView>
</ScrollView>
</View>

2-jika Anda tidak ingin menggunakan tampilan, Anda dapat mengatur ScrollView flex ke 1

Solusi 3-in pertama Anda dapat menggunakan tag kosong daripada Lihat seperti ini:

<> 
</>
MPN7 Aug 19 2020 at 17:43

Jika masalah Anda hanya dengan keypad terbuka maka Anda mungkin ingin melihat KeyboardAvoidingView

Saya punya banyak masalah dengan ini! Anda ingin mencoba semua pengaturan untuk prop behavior. mungkin ada satu yang cocok untuk Anda!

Dari contoh mereka:

import React from 'react';
import { View, KeyboardAvoidingView, TextInput, StyleSheet, Text, Platform, 
TouchableWithoutFeedback, Button, Keyboard  } from 'react-native';

const KeyboardAvoidingComponent = () => {
   return (
     <KeyboardAvoidingView
       behavior={Platform.OS == "ios" ? "padding" : "height"}
       style={styles.container}
     >
       <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
         <View style={styles.inner}>
           <Text style={styles.header}>Header</Text>
           <TextInput placeholder="Username" style={styles.textInput} />
           <View style={styles.btnContainer}>
             <Button title="Submit" onPress={() => null} />
           </View>
         </View>
       </TouchableWithoutFeedback>
     </KeyboardAvoidingView>
   );
 };

 const styles = StyleSheet.create({
   container: {
     flex: 1
   },
   inner: {
     padding: 24,
     flex: 1,
     justifyContent: "space-around"
   },
   header: {
     fontSize: 36,
     marginBottom: 48
   },
   textInput: {
     height: 40,
     borderColor: "#000000",
     borderBottomWidth: 1,
     marginBottom: 36
   },
   btnContainer: {
     backgroundColor: "white",
     marginTop: 12
   }
 });

 export default KeyboardAvoidingComponent;
Hogan Aug 21 2020 at 17:03

Saya pikir jika konten ScrollView Anda lebih kecil dari layar, itu tidak akan bergulir. Jadi Anda dapat mencoba membuat tinggi: "150%" atau sesuatu seperti itu atau menambahkan dalam tampilan kosong dengan ketinggian untuk meregangkan ScrollView lebih tinggi dari layar Anda.

Membungkus ScrollView dalam Tampilan dengan ketinggian> layar juga akan berfungsi.

MuhammadBilal Aug 22 2020 at 07:10

Saya pikir Anda dapat memperbaiki masalah ini dengan mengikuti tip di bawah ini: 1) Menyesuaikan posisi tag ScrollView kemungkinan besar akan berada di atas kondisi Anda langsung di dalam <> </> atau menambahkan Tag tampilan, di atas tag ScrollView seperti

<><View style={{ Height: "auto", maxHeight: screenHeight}}><ScrollView>....</ScrollView></view></>

2) Dengan menyesuaikan ketinggian, properti maxHeight dan properti flex

Jika berhasil untuk Anda, beri tahu saya