React Native: Comment styliser le TextInput?

Question

J'ai donc un composant dans mon application native React
Ce composant doit rendre le TextInput en bas.
Lorsque le clavier est affiché, le conteneur (y compris TextInput et Send Button) doit se déplacer au-dessus du clavier.
aussi, je veux faire la hauteur d'entrée changement à chaque fois que l'utilisateur cliquez sur l'entrer dans le clavier, comme ceci:

Mais tout ce que j'ai est comme ceux-ci:

Ci-dessous mon code :
test_page2.js

import React from 'react' 
import { View, Text, TouchableHighlight, TextInput, Dimensions, StyleSheet } from 'react-native' 
import { StackNavigator } from 'react-navigation' 
import { colors } from '../styles/colors' 

let windowSize = Dimensions.get('window') 



export default class TestScreen extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     message:'', 
    } 
    } 

    static navigationOptions = { 
     title: 'Test Page 2', 
    }; 


    onBackPress(){ 
     console.log("thesauhduiahduisahd") 
    } 

    onSendPress() { 
     console.log("send message"); 
     // this.setState({message: ''}); 
    } 


    render() { 
     return ( 
      <View style={styles.container}> 
      <View style={styles.chatContainer}> 
       <Text style={{color: '#000'}}>Others Component</Text> 
      </View> 
      <View style={styles.inputContainer }> 
       <View style={styles.textContainer}> 
       <TextInput 
        multiline={true} 
        value={this.state.message} 
        style={styles.input} 
        placeholder="Tulis pesan" 
        onChangeText={(text) => this.setState({message: text})} 
        underlineColorAndroid='rgba(0,0,0,0)' /> 
       </View> 
       <View style={styles.sendContainer}> 
       <TouchableHighlight 
        underlayColor={'#4e4273'} 
        onPress={() => this.onSendPress()} 
        > 
        <Text style={styles.sendLabel}>SEND</Text> 
       </TouchableHighlight> 
       </View> 
      </View> 
      </View> 
     ); 
    } 
} 


var styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     justifyContent: 'center', 
     alignItems: 'stretch', 
     backgroundColor: '#ffffff' 
    }, 
    topContainer: { 
     flex: 1, 
     flexDirection: 'row', 
     justifyContent: 'flex-start', 
     alignItems: 'center', 
     backgroundColor: '#6E5BAA', 
     paddingTop: 20, 
    }, 
    chatContainer: { 
     flex: 11, 
     justifyContent: 'center', 
     alignItems: 'stretch' 
    }, 
    inputContainer: { 
     flex: 1, 
     flexDirection: 'row', 
     justifyContent: 'space-around', 
     alignItems: 'center', 
     backgroundColor: '#6E5BAA' 
    }, 
    textContainer: { 
     flex: 1, 
     justifyContent: 'center' 
    }, 
    sendContainer: { 
     justifyContent: 'flex-end', 
     paddingRight: 10 
    }, 
    sendLabel: { 
     color: '#ffffff', 
     fontSize: 15 
    }, 
    input: { 
     width: windowSize.width - 70, 
     color: '#555555', 
     paddingRight: 10, 
     paddingLeft: 10, 
     paddingTop: 5, 
     height: '100%', 
     borderColor: '#6E5BAA', 
     borderWidth: 1, 
     borderRadius: 2, 
     alignSelf: 'center', 
     backgroundColor: '#ffffff' 
    }, 
    }); 

Comment puis-je atteint la conception comme mon exemple?
Merci à l'avance

Answer 1

ce que je fais dans mon application pour lutter contre ce type de situation est la suivante:

1) Installez un module de noeud -

npm install react-native-keyboard-aware-scroll-view --save or yarn add react-native-keyboard-aware-scroll-view --save 

2) importer le projet dans votre projet:

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view' 

3) Encapsulate tout à l'intérieur du <keyboardAwareScrollView> </keyboardAwareScrollView> comme ceci:

render(){ 
    return (
     <KeyboardAwareScrollView contentContainerStyle={{flex: 1, 
     justifyContent: 'space-around', 
     alignItems: 'center', 
     width: null, 
     height: null,}}> 
     <View> 
     .... 
     </View> 
     </KeyboardAwareScrollView> 
    ) 
} 

Tout semble plutôt bien. Cheers :)