Question

我试图避免键盘关闭textinputs。行为填充在行为位置工作时不会引起任何变化，但是由于某些原因，如果我将行为放置在徽标img上不再居中。

主要渲染方法。

render() {



    return (

        <KeyboardAvoidingView behavior="padding" enabled style={styles.container}>



 <Image onLoadEnd ={()=>this.setState({logoLoading:false})}style={{marginTop:height*0.0146,width:width*350/411.42,height:height*350/683.42,resizeMode:'contain'}}  source={require('../assets/utils/Logo.png')}/>



{this.renderUi()}








        </KeyboardAvoidingView>


    );
  }

RenderUi：

    renderUi = ()=>{
    if(this.state.logoLoading == false){
      return(
        <View style={{alignItems:'center'}}>
        <TextInput textAlign='center'
        style={{ borderWidth: 1, fontFamily:Fonts.MainFont,
                   borderColor: 'lightgrey', width:width*175/411.42,height:height*50/683.42,color:'white'}} placeholder="Username" 
        onChangeText={(username) => {this.setState({username}); }}
        value={this.state.username}
        placeholderTextColor="white"
       />

       <TextInput  textAlign='center' style={{ borderWidth: 1,fontFamily:Fonts.MainFont, 
                   borderColor: 'lightgrey', width:width*175/411.42,height:height*50/683.42,color:'white'}}   placeholder="Password" secureTextEntry 
       onChangeText={(password) => {this.setState({password}); }}
       value={this.state.password}
       placeholderTextColor="white"

       />
// BUTTONS
       <View style={{justifyContent:'center',alignItems:'center',marginTop:40}}>
       <TouchableOpacity>
       <Button style={{ justifyContent:'center',marginBottom:height*30/683.42,width:width,height:height*55/683.42}}rounded 
       onPress={this.login}
       >
       <Text style={{ fontSize:50,fontFamily:Fonts.MainFont}}>TEST</Text>

       </Button>
       </TouchableOpacity>
       <Button style={{ justifyContent:'center',width:width,height:height*55/683.42}} rounded 
       onPress={this.goRegister}
       >
       <Text style={{ fontSize:30,fontFamily:Fonts.MainFont}}>TEST</Text>

       </Button>



       </View>
    </View>
      )

    }

    }

容器样式：

container: {
    flex:1,
    backgroundColor: "#01021a",
    flexDirection:"column",
    justifyContent:"space-between",
    alignItems:'center',
  width:width,
  height:height
  },

如果我将KeyboardAvoidingView添加到renderUi函数的主视图，则它仍然相同。

Answer 1

我刚刚解决了使行为= position并在img顶部添加额外一层的问题。

<View style={{alignItems:'center'}}>
 <Image onLoadEnd ={()=>this.setState({logoLoading:false})}style={{marginTop:height*0.0146,width:width*350/411.42,height:height*350/683.42,resizeMode:'contain'}}  source={require('../assets/utils/Logo.png')}/>

</View>

在TextBox顶部反应本机设计键盘-无法使KeyboardAvoidingView工作

1 个答案: