Javascript React Native：如何设置TextInput的样式？

所以我的React原生应用程序中有一个组件 此组件应在底部呈现TextInput。 显示键盘时，包含文本输入的容器和发送按钮应移动到键盘上方。 此外，我希望每次用户单击键盘输入时，输入高度都会发生变化，如下所示：

但我所得到的是这样的：

以下是我的密码： 测试页面2.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'
    },
  });

我如何才能像我的例子一样实现设计？

---

提前感谢

我在应用程序中处理此类情况的方法如下：

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.将容器内的所有内容封装如下：

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

一切似乎都很好

---

干杯：

啊，谢谢你的真知灼见。将进一步了解此软件包。。