javascript - 如何防止组件随着 View 的增长而向上移动

Question

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

此处按钮正确放置在输入旁边。然而，每当输入和 View 因为输入多行而增长时，按钮就会随之向上移动:

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

这是我的代码:

<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>

Answer 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