React Native：TextInputのスタイル設定方法

Question

私はReactネイティブアプリにコンポーネントを持っています
このコンポーネントは、TextInputを一番下にレンダリングする必要があります。
キーボードが表示されているときに、コンテナ（TextInputとSend Buttonを含む）がキーボードの上に移動する必要があります。
はまた、私はちょうどこのように、入力された高さの変化のたびにユーザーがキーボードで入力する]をクリックしたい：

しかし、私が持っているすべては、これらのようなものです： 以下

は私のコードです：
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' 
    }, 
    }); 

？事前

Answer 1

で
おかげで、次のように何私は状況のこれらの種類に取り組むために自分のアプリケーションで行うことである。

1）はノードモジュールのインストール -

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

2）あなたにプロジェクトをインポートプロジェクト：

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

3）は、このような<keyboardAwareScrollView> </keyboardAwareScrollView>内のすべてのものをカプセル化：

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

すべてがかなり良いようです。

乾杯：