невозможно прокрутить в scrollView
У меня есть экран, на котором я набираю поле ввода и соответственно получаю результаты поиска. Список отображается в ScrollView, но он по-прежнему не позволяет мне прокручивать, когда клавиатура открыта (в Android).
Как я могу это исправить?
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),
},
});
Я уже пробовал добавить nestedScrollEnabled = {true}, но это не имеет значения.
Здесь вызывается упомянутый выше компонент:
<View style={styles.dropdown}>
<LocationsFound
addressesFound={locations.addressesFoundList} />
....
dropdown: {
position: 'absolute',
top: moderateScale(215),
zIndex: moderateScale(10),
backgroundColor: '#fff',
flex: 1,
},
Я попытался добавить высоту: 80% к dropdown
. Это дает возможность немного прокручивать. Однако, когда клавиатура открыта, я могу прокручивать, но не до конца. Если я добавлю высоту: 100%, я вообще не смогу прокручивать.
Ответы
Я приготовил для вашей проблемы выставочную закуску и изучил ее. Думаю, я решил это. взгляни на это:
Это ссылка на закуску выставки
Чтобы описать это:
Как я выяснил, ваша проблема заключалась в том, что ScrollView
рост не менялся ни в каких ситуациях, даже если давать больше height
или давать paddingBottom
.
поэтому я ScrollView
заключил View
тег в тег и придал ему следующий стиль:
scrollViewWrapper: {
width: '100%',
minHeight: '100%',
paddingBottom: 1.3*keyboardHeight
}
В этом стиле вы видите параметр keyboardHeight
, который state
я устанавливаю в следующих componentDidMount
кодах:
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,
});
};
Я должен упомянуть, что вы не можете переместить стиль за paddingBottom: 1.3*keyboardHeight
пределы компонента класса и поместить его в styles
объект, потому что keyboardHeight
это a state
, он может быть известен только внутри компонента.
Предлагаю вам взглянуть на мой код в expo snake, чтобы лучше понять мои описания.
Надеюсь, это решит вашу проблему.
Редактировать функциональные компоненты
используйте приведенный ниже код для определения высоты клавиатуры при написании функциональных компонентов:
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)
};
Я тоже редактировал закуску на выставке . вы можете взглянуть на него, чтобы увидеть рабочий пример.
Я могу придумать три решения (вы можете попробовать любое из них):
1-Попробуйте обернуть представление прокрутки внутри тега представления с помощью flex = 1, например:
<View style={{ flex:1 }}>
<ScrollView>
</ScrollView>
</View>
2-если вы не хотите использовать представление, вы можете установить для ScrollView flex значение 1
В первом решении 3-в вы можете использовать пустой тег вместо View, например:
<>
</>
Если ваша проблема связана только с открытой клавиатурой, вы можете взглянуть на KeyboardAvoidingView.
У меня с этим было много проблем! Вы хотите попробовать все настройки опоры behavior
. вероятно, есть тот, который вам подходит!
Из их примеров:
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;
Я думаю, что если ваше содержимое ScrollView меньше экрана, оно не будет прокручиваться. Таким образом, вы можете попробовать установить высоту: «150%» или что-то в этом роде или добавить пустое представление с высотой, чтобы растянуть ScrollView выше, чем ваш экран.
Перенос ScrollView в View с высотой> экрана тоже будет работать.
Я думаю, вы можете решить эту проблему, следуя приведенным ниже советам: 1) Регулировка позиции тега ScrollView, скорее всего, будет выше вашего условия непосредственно внутри <> </> или добавить тег просмотра над тегом ScrollView, например
<><View style={{ Height: "auto", maxHeight: screenHeight}}><ScrollView>....</ScrollView></view></>
2) Регулируя высоту, свойство maxHeight и свойство flex
Если это сработало для вас, дайте мне знать