如何在react-native中防止文本输入容器在键盘后面自动生长？

Question

目标：创建一个文本输入字段，随着输入行的扩展而响应性地扩展，达到一定的程度，就像大多数消息应用程序一样。

问题：当输入扩展到3行或4行之后，输入容器的顶部没有向上扩展，而是根据内容大小扩展，这是它应该做的，但容器被重新定位在键盘词建议的后面，这重新定位了左边的按钮（输入容器的一部分）以及 <TextInput> 本身。

下图显示了我想要的底部的填充。"下部容器 "体现了按钮和输入字段。"灰白色 "是键盘建议的顶部（iOS）。

下图显示了不受欢迎的行为。你可以看到输入的底部边框，以及按钮开始消失在建议框键盘后面。如果输入框不断扩大，底部边框和按钮将逐渐变得不可见。

这里是整个屏幕组件。

render () {
    return (
        <KeyboardAvoidingView
            style={{ flex: 1, backgroundColor: Colors.PRIMARY_OFF_WHITE,
            }}
            behavior={Platform.OS === 'ios' ? 'position' : null}
            keyboardVerticalOffset={Platform.OS === 'ios' ?hp("11%") : 0}
        >

        /* Upper Container */
        <View style={{ justifyContent: 'flex-start', height: height*0.8, paddingBottom: 10 }}>
            <FlatList
                data={this.props.messages}
                ref={'list'}
                onContentSizeChange={() => this.refs.list.scrollToEnd()}
                keyExtractor={(item) => {
                    return (
                        item.toString() +
                        new Date().getTime().toString() +
                        Math.floor(Math.random() * Math.floor(new Date().getTime())).toString()
                    );
                }}
                renderItem={({ item, index }) => {
                    return (
                        <Components.ChatMessage
                            isSender={item.sender == this.props.uid ? true : false}
                            message={item.content.data}
                            read={item.read}
                            time={item.time}
                            onPress={() =>
                                this.props.readMsg(
                                    {
                                        id: this.props.uid,
                                        role: this.props.role,
                                        convoId: this.state.ownerConvoId
                                    },
                                    item.docId,
                                    this.props.navigation.state.params.uid
                                )}
                         />
                      );
                  }}                    
                />
                </View>

            /* Lower Container */
                <View
                    style={{
                        height: this.state.height+20,
                        flexDirection: 'row',
                        alignItems: 'center',
                        justifyContent:"space-around",
                        paddingVertical: 10
                    }}
                >
                    <Components.OptionFan
                        options={[
                            {
                                icon: require('../assets/img/white-voice.png'),
                                onPress: () => {
                                  this.props.navigation.navigate('Schedule', {
                                        receiver: this.conversants.receiver,
                                        sender: this.conversants.sender,
                                        type: 'Voice'
                                    });
                                },
                                key: 1
                             },
                             {
                                icon: require('../assets/img/white-video.png'),
                                onPress: () => {
                                    this.props.navigation.navigate('Schedule', {
                                        receiver: this.conversants.receiver,
                                        sender: this.conversants.sender,
                                        type: 'Video'
                                    });
                                },
                                key: 2
                              }
                          ]}
                      />


                        <TextInput
                            multiline={true}
                            textAlignVertical={'center'}
                            onChangeText={(text) => this.setState({ text })}
                            onFocus={() => this.refs.list.scrollToEnd()}
                            onContentSizeChange={(event) =>
                                this.setState({
                                    height:
                                        event.nativeEvent.contentSize.height <= 40
                                            ? 40
                                            : event.nativeEvent.contentSize.height
                                })}
                            style={{
                                height: Math.max(40, this.state.height),
                                width: wp('80%'),
                                borderWidth: 1,
                                alignSelf: this.state.height > 40 ? "flex-end":null,
                                borderColor: Colors.PRIMARY_GREEN,
                                borderRadius: 18,
                                paddingLeft: 15,
                                paddingTop: 10,
                                paddingRight: 15
                            }}
                            ref={'input'}
                            blurOnSubmit={true}
                            returnKeyType={'send'}
                            placeholder={'Write a message...'}
                            onSubmitEditing={() => {
                                if (this.props.role == 'Influencer') {
                                    this.send();
                                    this.refs.input.clear();
                                } else {

                                    this.setState({ visible: true });
                                }
                            }}
                        />
                    </View>
            </KeyboardAvoidingView>
        );
    }

我怎样才能实现一个外延式增长，并在底部保持所需的填充？

EDIT：要说明的是，这个问题不是关于如何制作一个自动增长的输入字段，上面的代码已经实现了，它是关于自动增长输入字段所在的容器，以及父容器、输入字段和按钮如何增长的问题。后面 键盘上的建议。目标 是让文字输入 始终 显示在键盘的正上方，inputbuttoncontainer底部与键盘之间的空间始终不变，而高度只向上扩展。

这里发布的问题也是类似的。在React Native中，如何在一个可滚动的表单中拥有多个多行文本输入，而不是隐藏在键盘后面？

Answer 1

你可以将父容器设置为 "100%"高度，并调整上部内容的大小，使输入容器始终向上生长。

一个简单的实现如下。textInputHeight 是从状态中提取的，并且当 TextInput 调整大小。

  return (
    <KeyboardAvoidingView
      style={{height: '100%'}}
      behavior={Platform.OS === 'ios' ? 'position' : undefined}
      keyboardVerticalOffset={100}>
      <ScrollView
        style={{
          backgroundColor: '#777',
          height: height - (80 + textInputHeight),
        }}>
        <View style={{height: 1000}} />
      </ScrollView>
      <TextInput
        multiline={true}
        onLayout={(event) => {
          if (textInputHeight === 0) {
            setTextInputHeight(event.nativeEvent.layout.height);
          }
        }}
        onContentSizeChange={(event) => {
          setTextInputHeight(event.nativeEvent.contentSize.height);
        }}
      />
    </KeyboardAvoidingView>
  );

Answer 2

作为一个额外的说明，当考虑到你的屏幕部分的动态高度时，一定要记得考虑状态栏（显然是iOS和android）以及屏幕底部讨厌的Soft Android导航栏，因为当使用Dimension api来处理 "窗口 "时，它并没有考虑到这一点。我的错误是忽略了这一点。

以获得状态栏和导航栏。

import {NativeModules, Platform} from 'react-native';

const { StatusBarManager } = NativeModules; // Note: StatusBar API is not good used here because of platform inconsistencies.

// Note: 'window' does not contain Android/iOS status bar or Android soft Navigation Bar
const WINDOW_HEIGHT = Dimensions.get('window').height;

// 'screen' gets full hardware dimension
const DEVICE_HEIGHT = Dimensions.get('screen').height;
const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBarManager.HEIGHT;
const ANDROID_NAV_HEIGHT = Platform.OS === 'ios' ? 0 : DEVICE_HEIGHT -  (WINDOW_HEIGHT + STATUSBAR_HEIGHT);