对齐列和行以匹配显示宽度

Question

我尝试使用flex创建一个包含列和行的表格式布局。

它看起来不错，但我无法弄清楚如何将按钮推到屏幕的右侧......它们只是留在中间位置。

这是我的代码+其中一行的样式（它们都使用相同的样式）：

<View style={{  flex: 1,    flexDirection: 'column',    justifyContent: 'space-between' }}>
                        <View style={{  flex: 1,  flexDirection: 'row',  justifyContent: 'space-between',  maxHeight: 40 }}>
                            <View>
                                <Image  source={character.Avatar}  />
                            </View>
                            <View style={{    width: 100, height: 50,  marginTop: 5}}>
                                <Button />
                            </View> 
                        </View>
                </View> 

下面是屏幕上的样子。如何获得右侧的按钮，在屏幕右侧排列？

谢谢！

Answer 1

很容易！ 只需在alignItems: 'flex-end'的父级中添加Button，就像这样：

<View style={{width: 100, height: 50, marginTop: 5, alignItems: 'flex-end'}}> <Button /> </View>

我在我的模拟器上测试它，希望它适合你