Question

我已将KeyboardAvoidingView添加到我的登录页面，当用户点击任一用户名或密码字段时，他们应该全部“向上移动”一点，以便用户可以看到登录按钮至少足以能够点击它。但是，目前没有任何反应。有谁知道如何在React Native中正常工作？

namespace tracker;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Notifications\Notifiable;
use Illuminate\Support\Facades\Auth;
use tracker\Scopes\IntegradorScope;

class Cliente extends Model
{
use Notifiable;

protected $table = "clientes";
protected $casts = [
    'reter_iss' => 'boolean',
    'simples_nacional' => 'boolean',
    'taxa_emissao_boleto' => 'boolean'
];

public function integradores()
{
    return $this->belongsToMany('tracker\Integrador', 'integrador_cliente', 'cliente_id', 'integrador_id');
}

public function veiculos()
{
    return $this->hasMany('tracker\Veiculo', 'cliente_id', 'id');
}

public function usuarios()
{
    return $this->hasMany('tracker\User', 'cliente_id', 'id');
}

/**
 * The "booting" method of the model.
 *
 * @return void
 */
protected static function boot()
{
    parent::boot();
    if (php_sapi_name() != 'cli') {
        $user = Auth::user();


        if (is_object($user)) {
            if ($user->role->first()->label == 'cliente') {
                static::addGlobalScope('Cliente', function ($builder) use ($user) {
                    $builder->where('id', $user->cliente_id);
                });
            } elseif ($user->role->first()->label != 'admin' && $user->integrador_id != 0) {
                static::addGlobalScope('Integrador', function ($builder) use ($user) {
                    $builder->whereHas('integradores', function ($q) use ($user) {
                        $q->where('integrador_id', $user->integrador_id);
                    });
                });
            }
        }
    }
}

这是我用来演示此视频的视频：

https://www.youtube.com/watch?v=Sr-z4VpZKg0&feature=youtu.be

另外，这里有一些css：

    return (
        <ImageBackground source={require('../../assets/signinBG.jpg')} style={styles.backgroundImage}>
            <KeyboardAvoidingView style={styles.formContainer} behavior="padding" enabled>
                <View style={styles.logoContainer}>
                    <Image source={require('../../assets/mb_logo.png')}
                           style={styles.logo}/>
                </View>
                <View style={styles.loginContainer}>
                    <StatusBar
                        barStyle={'light-content'}/>
                    <View style={styles.usernameInputBar}>
                        {this.state.showUsernameLabel &&
                            <Text style={styles.formLabel}>username</Text>
                        }
                        <TextInput
                            underlineColorAndroid="transparent"
                            style={styles.textInput}
                            placeholder="username"
                            placeholderTextColor="rgba(255,255,255,0.7)"
                            autoCorrect={false}
                            autoFocus={autoFocus}
                            returnKeyType={'next'}
                            autoCaptialize={'none'}
                            keyboardType={'email-address'}
                            enablesReturnKeyAutomatically={true}
                            onFocus={() => this.onFocus()}
                            onBlur={() => this.onBlur()}
                            onSubmitEditing={() => this.passwordInput.focus()}
                            onChangeText={(text) => this.handleUsernameChange(text)}
                            value={this.state.email}
                        />
                    </View>
                    <View style={styles.passInputBar}>
                        {this.state.showPassowrdLabel &&
                            <Text style={styles.formLabel}>password</Text>
                        }
                        <TextInput
                            underlineColorAndroid="transparent"
                            style={styles.textInput}
                            placeholder="password"
                            placeholderTextColor="rgba(255,255,255,0.7)"
                            autoCapitalize="none"
                            autoFocus={autoFocus}
                            returnKeyType={'go'}
                            keyboardType={'default'}
                            secureTextEntry
                            enablesReturnKeyAutomatically={true}
                            onFocus={() => this.onFocus()}
                            onBlur={() => this.onBlur()}
                            ref={(input) => this.passwordInput = input}
                            onChangeText={(text) => this.handlePasswordChange(text)}
                            value={this.state.password}
                        />
                    </View>

                    <TouchableOpacity style={[styles.buttonContainer, updateButton ? styles.buttonActive : styles.buttonDefault]} onPress={() => this.onSubmitEmail()}>
                        {this.renderSignInText()}
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this.showForgotLogin()}>
                        <Text style={styles.forgotLogin}>Forgot username of password?</Text>
                    </TouchableOpacity>
                </View>
            </KeyboardAvoidingView>
        </ImageBackground>
    )

Answer 1

你应该设置

behavior="height"

"padding"适用于iOS。

Answer 2

我使用了KeyboardAvoidingView，它不起作用。我找到了解决方案。我不知道这是否适用于Android，但它适用于iOS，您可以尝试。

这是我对另一个问题的answer。

为什么KeyboardAvoidingView无法在React Native中运行？

2 个答案: