React Native Button对齐问题

Question

我有一个使用Native Base的Expo，React Native应用程序。

但是对于iPhone上的Button有一些问题。

它显示带有按钮和文本的卡列表，按钮右侧对齐，当文本多于一行时，按钮对齐失败。

代码如下：

<List dataArray={items}
          renderRow={(item) =>
            <Card rounded>
              <CardItem rounded style={{margin:5}}>
                <Grid>
                  <Row>
                    <Text style={styles.headertext}>{item.site.name}</Text>
                    <Right style={{ flex: 1 }}>
                    {this.getEventType(item)}
                    </Right>
                  </Row>
                  <Row>
                    <Text style={styles.textIdBold}>{item.controller.name}</Text><Text> </Text><Text style={styles.textId}>{item.controller.controller_id}</Text>
                  </Row>
                  <Row>
                    <Text style={styles.textId}>{item.date}</Text>
                  </Row>
                  <Row>
                    <Text style={styles.eventMessage}>
                    {item.description}  
                    </Text>
                  </Row>
                </Grid>
              </CardItem>
            </Card>
          }>

返回getEventType（item）是：

<Button small rounded info>
   <Text>Settings</Text>
</Button>

相关款式：

标题文本：

fontSize: (Platform.OS === 'ios') ? 15 : 18,
color: '#000',
marginBottom: 0,
textAlign: 'center',
alignSelf:'flex-start'

textIdBold

fontSize: (Platform.OS === 'ios') ? 12 : 15,
color: '#000',
fontWeight: 'bold',
paddingTop: (Platform.OS === 'ios') ? 3 : 8

TEXTID

fontSize: (Platform.OS === 'ios') ? 12 : 15,
color: '#000',
paddingTop: (Platform.OS === 'ios') ? 3 : 8

发生了什么的屏幕截图：

Single line no problem for Events Button aligning to the right, multi line is a problem!

任何想法将不胜感激！

添加后：

     <Right style={{ flex: 1 }}>
         <View style={{position:'absolute', top: 0, right: 0, zIndex:100}}>
           {this.getEventType(item)}
         </View>
     </Right>

结果更好，但没有100％解决：

Looking much better

Answer 1

您只需设置一个视图即可显示您的按钮。试试以下代码：

<View style={{position:'absolute', top: 10, right: 10}}>
{this.getEventType(item)}
</View>

希望它能帮到你:)

Answer 2

      <View style={styles.buttonView}>
        <Button
        >
          <Text>
            Submit
          </Text>
        </Button>
      </View>

而且，

        buttonView: {
         alignSelf: 'center'
        }