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:
Outras informações:
react-native-cli: 2.0.1 e react-native: 0.55.4