tidak dapat menggulir di scrollView
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
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 ScrollView
ketinggian tidak berubah dalam situasi apa pun, bahkan dengan memberi lebih banyak height
atau memberi paddingBottom
.
jadi saya membungkus ScrollView
dalam View
tag dan memberikan styling ini untuk itu:
scrollViewWrapper: {
width: '100%',
minHeight: '100%',
paddingBottom: 1.3*keyboardHeight
}
Dalam gaya ini, Anda melihat parameter keyboardHeight
, yaitu state
yang saya setel componentDidMount
dengan 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*keyboardHeight
luar komponen kelas dan menempatkannya di styles
objek, karena keyboardHeight
adalah 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.
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:
<>
</>
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;
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.
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