javascript - react native : How to styling the TextInput?

Question

所以我的 React Native 应用程序中有组件
该组件应在底部呈现 TextInput。
当键盘显示时，容器(包括 TextInput 和发送按钮)应移动到键盘上方。
另外，我想让每次用户单击键盘中的回车键时输入高度发生变化，就像这样:

但我所拥有的只是这些:

下面是我的代码:
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>
     )
} 

一切看起来都不错。

干杯:)