React Native布局问题：如何创建三列对齐行并添加等高按钮？

我需要实现一个三列行布局：左列放置文本，中间列放置文本，右侧紧跟一个高度铺满整行的按钮。当前使用以下React Native代码实现后，出现列未对齐的问题，附上当前效果、目标效果及列未对齐的截图，寻求正确的实现方案。

return (
    <View style={{ padding: 20, width: 370 }}>
        <View style={{ flexDirection: 'row', }}>
            <Text style={{ fontSize: 12, lineHeight: 30, color: '#9394B3' }}>hi</Text>
            <Text style={{ flex: 1, fontSize: 16, lineHeight: 30, color: '#1D2359', textAlign: 'right' }}>hello</Text>
        </View>

        <View style={{ flexDirection: 'row', }}>
            <Text style={{ fontSize: 12, lineHeight: 30, color: '#9394B3' }}>  hi2</Text>
            <Text style={{ flex: 1, fontSize: 16, lineHeight: 30, color: '#1D2359', textAlign: 'right' }}>hello2</Text>
        </View>
        <View style={{ flexDirection: 'row' }}>
            {addCoin && <Button onPress={() => addCoin(currentCoin, coinPrice)}> Add  </Button>}
        </View>
    </View>
)

效果截图 #

• 当前效果：
  
• 目标效果：
  
• 列未对齐问题：
  

内容的提问来源于stack exchange，提问作者signup