反应本机 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}>

    <Appbar title="New activity" canGoBack goBack={goBack} />

    <KeyboardAvoidingView behavior="position" >

      <View style={{ flex: 1 }}> // --> Remove flex: 1 if you experience some issue with the positioning

          <View style={style.iconSelecter}>

              <GestureRecognizer onSwipeLeft={nextIcon} onSwipeRight={lastIcon}>

                  <Image style={style.icon} source={icons[currentIconIndex]?.file}></Image>

              </GestureRecognizer>

          </View>

          <View style={style.hintWrapper}>

              <Text style={style.hint}>Swipe to cycle through the icons</Text>

          </View>

          <KeyboardAvoidingView>

              <View style={style.textInputWrapper}>

                  <TextInput style={style.textInput} placeholder={"Give this activity a name"} value={name} onChangeText={setName}></TextInput>

              </View>

          </KeyboardAvoidingView>

          <TouchableNativeFeedback onPress={createActivity} background={TouchableNativeFeedback.Ripple("#fff", true)}>

              <View style={style.saveButton}>

                  <Image style={style.saveIcon} source={require("../../assets/icons/light/save.png")}></Image>

              </View>

          </TouchableNativeFeedback>

      </View>

    </KeyboardAvoidingView>

</View>

另请参阅上面代码中的注释。检查您是否真的需要在所有外包装元素中使用 flex: 1 ，并查看height您在style.main基于维度中设置的内容。我不认为这是必要的，我认为如果您修复父容器的高度，它可能会导致一些测量问题。

编辑：

我只是在挖掘 react-native 文档，我意识到有一个 zIndex 可以用来避免绝对定位。它是一个相对风格的道具，因此需要在兄弟视图之间设置，如下所示：

export default class MyComponent extends React.Component {

  render() {

    return (

      <View>

        <View style={[styles.appbarShape, styles.appbarZIndex]} ><Text>Header</Text></View>

        <KeyboardAvoidingView behavior="position" style={styles.contentZIndex}>

          {other children}

          <TextInput placeholder="enter text"/>

        </KeyboardAvoidingView>

      </View>

    );

  }

}

const styles = StyleSheet.create({

  appbarShape: {

    height: 80,

    width: Dimensions.get('window').width,

    justifyContent: 'center',

    alignSelf: "stretch",

    backgroundColor: "#FFF"

  },

  appbarZIndex: {

    zIndex: 3,

  },

  contentZIndex: {

    zIndex: 0

  }

});

由于代表 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} 

extraScrollHeight={70} style={styles.mainContainer}

automaticallyAdjustContentInsets={true}

enableOnAndroid={true}

keyboardShouldPersistTaps='handled'

scrollEnabled={true} >

//your form 

</KeyboardAwareScrollView>

 const styles = StyleSheet.create({

    mainContainer: { flex: 1, marginHorizontal: 15, marginVertical: 15 },

});