0

Boa noite,

Estou com um problema no teclado da minha aplicação android, eu gostaria que ao abrir o teclado da mesma, apenas a caixa de texto inferior se mexesse, ou os items da tela se ajustassem automaticamente, mas isso não acontece de forma alguma.

Pagina.js

import React, { Component } from 'react';
import { View, Text, StyleSheet, Image, TextInput, KeyboardAvoidingView } from 'react-native';

class Pagina extends Component {

    render() {
        return (
            <KeyboardAvoidingView style={style.container} behavior="padding" enabled>
                <View style={style.barNav}>
                    <Text>xxx</Text>
                </View>

                <Image 
                    style={style.imagem} 
                    source={{ 
                        uri: "https://nospensees.fr/wp-content/uploads/2018/02/femme-en-position-du-lotus.jpg"
                    }} 
                />

                <Image 
                    style={style.imagem} 
                    source={{ 
                        uri: "https://nospensees.fr/wp-content/uploads/2018/02/femme-en-position-du-lotus.jpg"
                    }} 
                />

                <TextInput style={style.entradaTexto} placeholder="Digite sua mensagem aqui!" />
            </KeyboardAvoidingView>
        );
    }
}

const style = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    },
    barNav: { 
        width: 100 + '%',
        height: 50,
        paddingTop: 5,
        justifyContent: 'center',
        alignItems: 'center'
    },
    imagem: {
        width: 100 + '%',
        height: 100
    },
    entradaTexto: {
        width: 100 + '%',
        height: 80
    },
})

export default Pagina;

Arquivo Manifest:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.Chat">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:allowBackup="false"
      android:theme="@style/AppTheme">
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

Resultado prático da operação:

Primeira Imagem

Segunda Imagem

Outras informações:

react-native-cli: 2.0.1 e react-native: 0.55.4

1 Resposta 1

0

Eu estava tendo o mesmo problema desenvolvendo para Android, consegui arrumar a solução dessa forma:

Abra o androidManifest, edite a seguinte linha:

android:windowSoftInputMode="adjustResize"

Insira o "adjustPan" também, ficando dessa forma:

android:windowSoftInputMode="adjustPan|adjustResize"

Pronto, assim o teclado nativo do Android não altera as posições Views declaradas no seu código.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .