即使在React-Native中使用KeyboardAvoidingView时，键盘仍然阻止TextInput字段

我在尝试使用TextInput输入值，但键盘阻止了该视图。我使用填充来配置KeyboardAvoidingView，以便在键盘处于活动状态时将元素向上推，但输入字段仍然完全被键盘阻挡。我试图为整个渲染方法创建一个父视图，并用KeyboardAvoidingView封装了我的子视图，但是这也不起作用。截图显示的行为。即使在React-Native中使用KeyboardAvoidingView时，键盘仍然阻止TextInput字段

在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 
    }

来源

2017-07-24 Joseph Sortino

你好，你必须给“的行为= {‘填充’}”这个属性的观点，那就是无法查看属性，它的属性KeyboarAvoidingView.So试图给该属性的KeyboarAvoidingView。谢谢 –

这实际上是一个编辑错误。该视图的填充行为曾经是KeyboardAvoidingView，但我忘记删除它时，我张贴在SO。 –

我给你的意见的建议，但在这里，我想给你一个演示，演示如何使用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>

来源

2017-07-25 04:53:00

即使在React-Native中使用KeyboardAvoidingView时，键盘仍然阻止TextInput字段

回答

相关问题