Question

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

但是在iPhone上按钮的对齐方面存在一些问题。

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

代码如下：

<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>

相关风格：

HEADERTEXT：

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={styles.buttonView}>
        <Button
        >
          <Text>
            Submit
          </Text>
        </Button>
      </View>

然后，

        buttonView: {
         alignSelf: 'center'
        }

React Native Button对齐问题

1 个答案: