React Native: Wie gestalte ich das TextInput?

Question

So habe ich Komponente in meiner React Native App
Diese Komponente sollte den TextInput am unteren Rand rendern.
Wenn die Tastatur angezeigt wird, sollte sich der Container (einschließlich TextInput und Send Button) über die Tastatur bewegen.
Auch möchte ich die Eingangshöhenänderung jedes Mal Benutzer machen die Tastatur eingeben klicken, wie folgt aus:

Aber alles, was ich habe wie diese ist:

Unten ist mein Codes :
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' 
    }, 
    }); 

Wie ich das Design genau wie mein Beispiel erreicht werden?
Vielen Dank im Voraus

Answer 1

Was ich in meiner Anwendung tun, ist diese Art von Situation zu bewältigen, wie folgt:

1) ein Knotenmodul installieren -

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

2) Ihr das Projekt Import in Projekt:

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

3) kapseln alles innerhalb des <keyboardAwareScrollView> </keyboardAwareScrollView> wie folgt aus:

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

alles scheint ziemlich gut.

Prost :)