反应本机 KeyboardAvoidingView 无法正确移动

Question

我有一个TextInput按下时会被键盘覆盖的东西。所以我把它包在一个KeyboardAvoidingView. 但无论我为此视图设置的行为如何，TextInput都不会在键盘上方移动。使用positionas 行为将TextInput仅移动到键盘上方的一半，而其他两个似乎根本不起作用。

我还尝试用 包裹我的整个组件KeyboardAvoidingView，但这样做会破坏整个布局。

谁能帮我？我从来没有设法KeyboardAvoidingView为我工作，现在我真的需要它。提前致谢！

这是我的组件。另外值得一提的是这个组件是顶级的（嗯，几乎是顶级，因为它被包裹在一个路由器中）

const { height, width } = Dimensions.get('screen')

const style = StyleSheet.create({

    main: {

        height,

        width,

        flexDirection: 'column',

    },

    iconSelecter: {

        width,

        height: 196,

        alignItems: 'center',

        justifyContent: 'center',

        backgroundColor: Colors.primary,

        marginTop: 32

    },

    icon: {

        height: 164,

        width: 164,

    },

    saveButton: {

        width: 96,

        height: 96,

        borderRadius: 100,

        backgroundColor: Colors.secondary,

        alignItems: "center",

        justifyContent: "center",

        alignSelf: 'center',

        position: 'absolute',

        bottom: 96 + 32

    },

    saveIcon: {

        height: 54,

        width: 54,

    },

    textInputWrapper: {

        borderBottomColor: Colors.textInputBorder,

        width: 288,

        borderBottomWidth: 1,

        alignSelf: 'center',

        marginTop: 96,

        height: 48,

    },

    textInput: {

        fontWeight: "300",

        fontSize: 14,

        margin: 0

    },

    hintWrapper: {

        alignSelf: 'center',

        marginTop: 4

    },

    hint: {

        fontSize: 12,

        fontFamily: "Roboto-Thin",

        fontStyle: 'normal',

    }

})

Answer 1

我建议您尝试将屏幕的所有内容都包裹起来<KeyboardAvoidingView />（或使其成为最外面的元素之一），否则它只会向上滑动其子项（View 和 TextInput），而将其余内容留在其原始位置，使布局看起来重叠和怪异。如果你这样做，值“位置”应该可以正常工作。像这样的东西：<View style={style.main}>&nbsp; &nbsp; <Appbar title="New activity" canGoBack goBack={goBack} />&nbsp; &nbsp; <KeyboardAvoidingView behavior="position" >&nbsp; &nbsp; &nbsp; <View style={{ flex: 1 }}> // --> Remove flex: 1 if you experience some issue with the positioning&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <View style={style.iconSelecter}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <GestureRecognizer onSwipeLeft={nextIcon} onSwipeRight={lastIcon}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Image style={style.icon} source={icons[currentIconIndex]?.file}></Image>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </GestureRecognizer>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <View style={style.hintWrapper}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text style={style.hint}>Swipe to cycle through the icons</Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <KeyboardAvoidingView>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <View style={style.textInputWrapper}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TextInput style={style.textInput} placeholder={"Give this activity a name"} value={name} onChangeText={setName}></TextInput>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </KeyboardAvoidingView>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TouchableNativeFeedback onPress={createActivity} background={TouchableNativeFeedback.Ripple("#fff", true)}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <View style={style.saveButton}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Image style={style.saveIcon} source={require("../../assets/icons/light/save.png")}></Image>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TouchableNativeFeedback>&nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; </KeyboardAvoidingView></View>另请参阅上面代码中的注释。检查您是否真的需要在所有外包装元素中使用 flex: 1 ，并查看height您在style.main基于维度中设置的内容。我不认为这是必要的，我认为如果您修复父容器的高度，它可能会导致一些测量问题。编辑：我只是在挖掘 react-native 文档，我意识到有一个 zIndex 可以用来避免绝对定位。它是一个相对风格的道具，因此需要在兄弟视图之间设置，如下所示：export default class MyComponent extends React.Component {&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <View>&nbsp; &nbsp; &nbsp; &nbsp; <View style={[styles.appbarShape, styles.appbarZIndex]} ><Text>Header</Text></View>&nbsp; &nbsp; &nbsp; &nbsp; <KeyboardAvoidingView behavior="position" style={styles.contentZIndex}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {other children}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TextInput placeholder="enter text"/>&nbsp; &nbsp; &nbsp; &nbsp; </KeyboardAvoidingView>&nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; );&nbsp; }}const styles = StyleSheet.create({&nbsp; appbarShape: {&nbsp; &nbsp; height: 80,&nbsp; &nbsp; width: Dimensions.get('window').width,&nbsp; &nbsp; justifyContent: 'center',&nbsp; &nbsp; alignSelf: "stretch",&nbsp; &nbsp; backgroundColor: "#FFF"&nbsp; },&nbsp; appbarZIndex: {&nbsp; &nbsp; zIndex: 3,&nbsp; },&nbsp; contentZIndex: {&nbsp; &nbsp; zIndex: 0&nbsp; }});由于代表 appbar 的视图具有更大的 zIndex，因此它显示在具有较低 zIndex 的视图之上查看此小吃https://snack.expo.io/5VXAcw4Y0的工作文档：https ://reactnative.dev/docs/layout-props

Answer 2

利用react-native-keyboard-aware-scroll-view<KeyboardAwareScrollView extraHeight={135} enabledOnAndroid={true}&nbsp;extraScrollHeight={70} style={styles.mainContainer}automaticallyAdjustContentInsets={true}enableOnAndroid={true}keyboardShouldPersistTaps='handled'scrollEnabled={true} >//your form&nbsp;</KeyboardAwareScrollView>&nbsp;const styles = StyleSheet.create({&nbsp; &nbsp; mainContainer: { flex: 1, marginHorizontal: 15, marginVertical: 15 },});