0

在我的React Native应用程序中，我有一张底部有一堆按钮的卡片——见下图。

在此处输入图像描述

我想将前两个图标保留在左侧，但将（X）按钮一直向右移动。我该如何做到这一点？

这是我现在所拥有的，但不起作用：

<Card style={styles.listItem}>
   <Card.Content>
      <Paragraph>{item.description}</Paragraph>
   </Card.Content>
   <Card.Actions>
      <Button><Icon name="checkcircleo" /> </Button> 
      <Button><Icon name="clockcircleo" /> </Button>
      <Button style={{ alignItems: 'stretch' }}><Icon name="closecircle" /> </Button>
   </Card.Actions>
</Card>
4

3 回答 3

4

要将最后一个按钮向右对齐，请为其添加{ marginLeft: 'auto' }样式。

要将所有按钮向右对齐，请将{ justifyContent: 'flex-end' }样式添加到Card.Actions.

于 2021-05-27T00:18:13.747 回答
0

您可以通过 flex 对前两个按钮进行分组，flex direction:'row'并且可以使用justifyContent:space-betweenon group 按钮和 cross 按钮。

这是一个如何实现的示例。：

<Card.Actions>
<View style={{flexDirection:'row',justifyContent:'space-between'}} >
      <View style={{flexDirection:'row'}}>
        <Button>
            <Icon name="checkcircleo" />
        </Button> 

        <Button>
            <Icon name="clockcircleo" />
        </Button>
      </View>
<View>
        <Button style={{ alignSelf: "flex-end" }}>
            <Icon name="closecircle" />
        </Button>
</View>
</View>
    </Card.Actions>

这里是世博小吃的例子：expo-snack

请检查一下。

随意质疑

于 2020-05-16T05:38:14.757 回答
0

尝试添加alignSelf: "flex-end"到按钮样式：

<Card style={styles.listItem}>
    <Card.Content>
        <Paragraph>{item.description}</Paragraph>
    </Card.Content>

    <Card.Actions>
        <Button>
            <Icon name="checkcircleo" />
        </Button> 

        <Button>
            <Icon name="clockcircleo" />
        </Button>

        <Button style={{ alignSelf: "flex-end" }}>
            <Icon name="closecircle" />
        </Button>
    </Card.Actions>
</Card>
于 2020-05-16T02:05:42.637 回答