2017-05-30 11 views
0

我遇到麻煩KeyboardAvoidingView正常工作推升的內容。對於一個類似的屏幕,它運行的很順利,但是,對於另一個屏幕來說,屏幕上的內容太大,增加了兩者之間的空間。任何修復?KeyboardAvoidingView與過度填充的反應本地

enter image description here

代碼:

<KeyboardAvoidingView behavior="padding" style={styles.container}> 
     {this.props.signNameErr && 
      (<Text style={{color: 'red'}}>{this.props.errMessage}</Text>) 
      } 
     <View style={styles.formContainer}> 
     <TextInput 
      style={styles.formInput} 
      placeholderTextColor="rgba(255,255,255,0.7)" 
      underlineColorAndroid='rgba(0,0,0,0)' 
      returnKeyType="next" 
      autoCorrect={false} 
      onChangeText={(full_name)=> this.setState({full_name})} 
      value={this.state.fullname} 
      placeholder="Enter Full Name" 
      /> 
      {this.props.signEmailErr && 
      (<Text style={{color: 'red'}}>{this.props.errMessage}</Text>) 
      } 
     <TextInput 
      style={styles.formInput} 
      placeholderTextColor="rgba(255,255,255,0.7)" 
      underlineColorAndroid='rgba(0,0,0,0)' 
      returnKeyType="next" 
      keyboardType="email-address" 
      autoCapitalize="none" 
      autoCorrect={false} 
      onChangeText={(email)=> this.setState({email})} 
      value={this.state.email} 
      placeholder="Enter Email" 
      keyboardType="email-address" 
      /> 
      {this.props.signPwErr && 
      (<Text style={{color: 'red'}}>{this.props.errMessage}</Text>) 
      } 
     <TextInput 
      style={styles.formInput} 
      placeholderTextColor="rgba(255,255,255,0.7)" 
      underlineColorAndroid='rgba(0,0,0,0)' 
      returnKeyType="next" 
      autoCorrect={false} 
      onChangeText={(password)=> this.setState({password})} 
      secureTextEntry={this.state.togglePW} 
      value={this.state.password} 
      placeholder="Create Password (Min. 6 Char)" 
      /> 
     <TouchableOpacity style={styles.buttonContainer} onPress={this.handleSignup}> 
      <Text style={styles.buttonText}>SIGN UP</Text> 
     </TouchableOpacity> 
     </View > 
     </KeyboardAvoidingView> 

回答

2

您可以設置填充,你甚至可以設置爲Android和iOS

import {KeyboardAvoidingView,Platform,} from 'react-native'; 

<KeyboardAvoidingView 
    behavior='padding' 
    keyboardVerticalOffset={ 
    Platform.select({ 
    ios:() => 0, 
    android:() => 200 
    })() 
}> 
    ...content... 
</KeyboardAvoidingView> 

只是一個例子,嘗試一下,並設置如何喜歡。

+1

謝謝,萌芽 - 這救了我! –