如何防止组件随着不断增长的视图向上移动答案

【问题标题】：How to keep a component from moving upwards with a growing view如何防止组件随着不断增长的视图向上移动
【发布时间】：2019-01-24 20:51:08
【问题描述】：

我正在尝试使用 react native 创建一个 Messenger，但我遇到了一个似乎无法解决的问题。这是到目前为止的样子，我在输入旁边有一个发送按钮（来自 React Native Elements 的按钮组件），它与按钮的视图相同，如下所示：

这里的按钮被正确放置在输入旁边。然而，每当输入和视图因输入多行而增长时，按钮就会随之向上移动：

当输入只有一行时，如何始终将按钮保持在相同的位置？

这是我的代码：

<KeyboardAvoidingView style={styles.container} 
behavior="padding"
keyboardVerticalOffset={64}>
    <View>
        <FlatList
        //...
        />
    <View 
        minHeight={45}
        style={{flexDirection:'row', backgroundColor: 'transparent' }}>
        <TextInput
            style={[styles.textInput, {fontSize:17,marginVertical: 0, width:300, marginLeft: 10}]}
            minHeight={25}
            multiline={true}
            enablesReturnKeyAutomatically={true}
            keyboardAppearance="dark"
            placeholder=""
            onChangeText={(message) => {this.setState({message})}}
            value={this.state.message}
        />
        <Button
             buttonStyle={{borderRadius: 25, bottom:-5, marginLeft: 10, paddingVertical: 5, backgroundColor: "#EAB844"}}
             icon={{name: 'arrow-up', type: 'feather', color:'white'}}
             onPress={()=>{ this.onPressButton()}} 
             title=""/> 
         </View>
    </View>
</KeyboardAvoidingView>

【问题讨论】：

标签： javascript react-native

【解决方案1】：

我认为这与此类似？

在 React Native 中，flexDirection 的默认值是 column（不像在 CSS 中，它是 row）。因此，在flexDirection: 'column' 中，横轴是水平的，alignSelf 向左/向右工作。要将页脚固定在底部，有多种选择。这是一个：将justifyContent: 'space-between' 应用于容器。我也见过使用justifyContent: 'flex-end' 的东西。

从这个问题 - 如果那个不起作用，还有其他解决方案。 Make an item stick to the bottom using flex in react-native

【讨论】：

它没有，我不得不将输入和按钮包装在单独的视图中，从带有平面列表的视图中分离出来，然后让按钮视图和输入视图随着文本的增加而增长输入。然后我使用 marginBottom 使按钮保持在原位。