即使在 React-Native 中使用 KeyboardAvoidingView，键盘也会阻止 TextInput 字段

Question

我正在尝试使用TextInput 输入一个值，但键盘挡住了视图。我使用填充配置了 KeyboardAvoidingView，因此当键盘处于活动状态时元素被向上推，但我的输入字段仍然被键盘完全阻止。我尝试为整个渲染方法创建一个父视图，并用 KeyboardAvoidingView 包装我的子视图，但这也不起作用。屏幕截图显示了该行为。

在 iOS 模拟器上测试。

return (
      <KeyboardAvoidingView behavior='padding'>
        <View>
          <View style={styles.container}>

            <View style={styles.header}>
              {jsonData}
              <TouchableHighlight
                underlayColor='transparent'
                style={styles.btn}
                onPress={this.goToAcibtnTwo}>
                <Image source={images.prredbtn}></Image>
              </TouchableHighlight>
              <Text style={styles.textthingsmall}>{'Must be Paid Immediately'}</Text>

              {jsonData2}
              <TouchableHighlight
                underlayColor='transparent'
                style={styles.btn}
                onPress={this.goToAcibtnTwo}>
                <Image source={images.prgreenbtn}></Image>
              </TouchableHighlight>
              <Text style={styles.textthingsmall}>{'May include next payment or other fees'}</Text>

              {jsonData3}
              <TouchableHighlight
                underlayColor='transparent'
                style={styles.btn}
                onPress={this.goToAcibtnTwo}>
                <Image source={images.prgreenbtn}></Image>
              </TouchableHighlight>
              {jsonData4}

              <View
                style={{
                flexDirection: 'row',
                paddingBottom: 15
              }}>
                <TouchableHighlight
                  underlayColor='transparent'
                  style={styles.btn}
                  onPress={this.goToAcibtnTwo}>
                  <Image source={images.prgreenbtn}></Image>
                </TouchableHighlight>
                <TextInput
                  style={{
                  borderColor: 'white',
                  borderWidth: 2,
                  height: 40,
                  width: 100,
                  fontSize: 17,
                  marginLeft: 60,
                  justifyContent: 'center',
                  alignSelf: 'center',
                  color: 'white'
                }}
                  keyboardType='numeric'
                  placeholder='0.00'
                  returnKeyType="done"
                  maxLength={10}
                  placeholderTextColor='ghostwhite'
                  onChangeText={(valueMoney) => this.setState({valueMoney})}
                  value={this.state.valueMoney}
                  onEndEditing={this.formatedMoneyEnd}/>
              </View>
            </View>
            <View>
              <Image style={styles.btmicons} source={images.optionsroundbtn}/>
            </View>
          </View>
        </View>
      </KeyboardAvoidingView>

    );
  }
}

export default Profile;

这是 CSS

  header: {
    alignSelf: 'center',
    height: window.height * 0.7,
    backgroundColor: '#0450A1',
    width: 400
  },

  bottom: {
    alignSelf: 'center',
    width: 400

  },

  btmicons: {
    flexDirection: 'column'
  },

  headerthing: {
    flex: 1,
    alignItems: 'center',
    paddingTop: 10
  },

  textthing: {
    alignSelf: 'flex-start',
    paddingLeft: 35,
    fontFamily: 'SFProText-Regular',
    fontSize: 17,
    color: '#FFFFFF',
    flexDirection: 'row'
  },

  textthingsmall: {
    alignSelf: 'flex-start',
    paddingLeft: 35,
    fontFamily: 'SFProText-Regular',
    fontSize: 12,
    paddingTop: 3,
    color: '#FFFFFF',
    flexDirection: 'row'
  },

  numberthing: {
    alignSelf: 'flex-end',
    paddingRight: 10,
    fontFamily: 'SFProText-Regular',
    fontSize: 35,
    color: '#FFFFFF'
  },

  headerthing2: {
    alignItems: 'center',
    flex: 1,
    padding: 1
  },

  separator: {
    alignSelf: 'center'
  },

  btn: {
    alignSelf: 'flex-start',
    paddingLeft: 35,
    marginBottom: 0,
    paddingBottom: 0
  },

  headerthing3: {
    alignItems: 'center',
    flex: 1,
    flexDirection: 'row'
  },

  rowLabelnum: {
    fontFamily: 'PTSans-Regular',
    fontSize: 24,
    color: '#FFFFFF'
  },

  rowLabelnummain: {
    fontFamily: 'PTSans-Regular',
    fontSize: 36,
    color: '#FFFFFF',
    alignSelf: 'center'
  },

  rowLabelText: {
    fontFamily: 'PTSans-Bold',
    fontSize: 24,
    color: '#FFFFFF'
  },

  rowLabelTextmain: {
    fontFamily: 'PTSans-Bold',
    fontSize: 30,
    color: '#FFFFFF'
  },

  rowLabelnumbtn: {
    fontFamily: 'PTSans-Regular',
    fontSize: 20,
    color: '#252525'
  },

  rowLabelTextbtn: {
    fontFamily: 'PTSans-Bold',
    fontSize: 25,
    color: '#252525'
  },

  separate: {
    alignSelf: 'center',
    justifyContent: 'center',
    width: 2,
    height: 100,
    backgroundColor: '#FFFFFF',
    marginBottom: 20
  },

  content: {
    flexDirection: 'row',
    alignSelf: 'center',
    justifyContent: 'center',
    width: 357,
    height: 2,
    backgroundColor: '#FFFFFF',
    marginBottom: 30
  },

  rectangleTop: {
    marginTop: 80,
    padding: 2
  },

  rectangleText: {
    flex: 1,
    flexDirection: 'row'
  },

  rectangleleft: {
    flexDirection: 'row',
    alignSelf: 'center',
    justifyContent: 'center'
  },

  keyboardview: {
    justifyContent: 'center',
    paddingHorizontal: 20,
    paddingTop: 20
  }

Answer 1

我在评论中给了你一个建议，但在这里，我将给你一个演示，展示如何使用 KeyboardAvoidingView。

      <KeyboardAvoidingView behavior="padding" style={styles.bottomcontainer}>
      <View style={styles.mobilecontainer}>
          <Text style={styles.getmovingtext}>Get ready with BitFamily</Text>
          <View style={styles.mobilenumbercontainer}>
            <PhoneInput
              ref='phone'
              onChangePhoneNumber={(text)=> this.setState({phoneNumber:text})}
              onPressFlag={this.onPressFlag}
              textProps={{placeholder: 'Enter mobile number',autoFocus:false,}}>
            </PhoneInput>

            <CountryPicker
              ref='countryPicker'
              onChange={(value)=> this.selectCountry(value)}
              translation='eng'
              cca2={this.state.cca2}
            >
            <View></View>
            </CountryPicker>
             <View style={styles.horizontalLine}/>
             <View style={styles.buttoncontainer}>
                <Text style={styles.verifytext} onPress={()=>this.callApi()}>Get confirmation code Now.</Text>
             </View>
             <View style={styles.socialcontainer}>
                 <Text style={styles.verifytext} onPress={()=>this.gotoSocoalLogin()}>Or Connect using your social account.</Text>
             </View>
      </View>

    </View>
      </KeyboardAvoidingView>