如何防止组件以越来越大的角度向上移动

Question

我正在尝试创建一个具有本机反应的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>

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