React Native 按钮中的图标和文本未垂直对齐

xzlaal3s  于 2023-05-13  发布在  React
关注(0)|答案(2)|浏览(176)

我尝试在Button中添加Icon和一些文本(也尝试了react-native-paper中的ChipBadge)。出于某种原因,Icon总是略高于文本。
使用View可以完美地工作,但是一旦我引入ButtonChipBadge,项目就不对齐了。

// Working with View
<View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
   <MaterialIcon name='access-time' size={iconSize2} color={themeColors[2]} />
   <Text variant="titleLarge" style={{ color: themeColors[2], fontFamily: defaultFont }}>&nbsp;12:00 - 21:30</Text>
</View>

// Missaligned with Button
<Button style={{ backgroundColor: themeColors[2], flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
  <MaterialIcon name='access-time' size={iconSize2} color={'whitesmoke'} />
  <Text variant="titleLarge" style={{ color: themeColors[2], fontFamily: defaultFont }}>&nbsp;12:00 - 21:30</Text>
</Button>

参考图片:

有人能告诉我我做错了什么吗?
试过的东西:
1.将paddingTop添加到Button
1.将marginTop添加到Icon
1.更改Button和/或Iconheight

sqxo8psd

sqxo8psd1#

尝试:

<Button style={{ backgroundColor: themeColors[2], flexDirection: 'row', justifyContent: 'center', alignItems: 'center', padding: 0, borderWidth: 0 }}>
  <MaterialIcon name='access-time' size={iconSize2} color={'whitesmoke'} />
  <Text style={{ color: themeColors[2], fontFamily: defaultFont }}>&nbsp;12:00 - 21:30</Text>
</Button>
quhf5bfb

quhf5bfb2#

在网页底部的文档中,有一个IconButton的示例。
这个例子也适用于我:

import Icon from 'react-native-vector-icons/FontAwesome';
const myButton = (
  <Icon.Button
    name="facebook"
    backgroundColor="#3b5998"
    onPress={this.loginWithFacebook}
  >
    Login with Facebook
  </Icon.Button>
);

const customTextButton = (
  <Icon.Button name="facebook" backgroundColor="#3b5998">
    <Text style={{ fontFamily: 'Arial', fontSize: 15 }}>
      Login with Facebook
    </Text>
  </Icon.Button>
);

相关问题