亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

反應本機 KeyboardAvoidingView 無法正確移動

反應本機 KeyboardAvoidingView 無法正確移動

一只斗牛犬 2022-06-05 16:53:55
我有一個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',    }})
查看完整描述

2 回答

?
慕容708150

TA貢獻1831條經驗 獲得超4個贊

我建議您嘗試將屏幕的所有內容都包裹起來<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


查看完整回答
反對 回復 2022-06-05
?
侃侃無極

TA貢獻2051條經驗 獲得超10個贊

利用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 },

});


查看完整回答
反對 回復 2022-06-05
  • 2 回答
  • 0 關注
  • 404 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號