gpt4 book ai didi

react-native - KeyboardAvoidingView、SafeAreaView 和 ScrollView 的最佳顺序

转载 作者:行者123 更新时间:2023-12-03 14:16:44 25 4
gpt4 key购买 nike

我使用 react native 创建一个移动应用程序。我使用 KeyboardAvoidingView、SafeAreaView 和 ScrollView 处理屏幕中的键盘位置。
我使用这个命令来管理键盘位置:

<KeyboardAvoidingView style={{ flex: 1 }} behavior="padding" enabled>
<SafeAreaView>
<ScrollView>
<Header
leftComponent={{
icon: "cancel",
color: "#fff",
size: 30,
onPress: () => navigate("Dashboard")
}}
centerComponent={{ text: "Ajouter une demande", style: { color: "#fff", fontSize: 18 } }}
rightComponent={{
icon: "help",
color: "#fff",
size: 30,
fontWeight: "bold",
onPress: () => Alert.alert("En cours de développement")
}}
backgroundColor="rgba(82, 159, 197, 1)"
// outerContainerStyles={{ height: Platform.OS === "ios" ? 70 : 70 - 24 }}
containerStyle={
{
// marginTop: Platform.OS === "ios" ? 0 : 15
}
}
/>
<View>
<Input placeholder="INPUT WITH CUSTOM ICON" leftIcon={<Icon name="user" size={24} color="black" />} />
</View>
</ScrollView>
</SafeAreaView>
</KeyboardAvoidingView>

我的问题是:使用这 3 个组件以避免最佳键盘位置的最佳顺序是什么

最佳答案

SafeAreaView仅适用于 iOS .因此,假设您使用 iOS .如果您的项目是 iOS ,您可以使用 KeyboardAwareScrollView .
SafeAreaView应该在顶部,因为它覆盖了屏幕区域。

KeyboardAwareScrollView 示例

gifimage

用法

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
...
<SafeAreaView>
<KeyboardAwareScrollView>
<View>
<TextInput />
</View>
</KeyboardAwareScrollView>
</SafeAreaView>

关于react-native - KeyboardAvoidingView、SafeAreaView 和 ScrollView 的最佳顺序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58119124/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com