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

xzlaal3s 于 2023-05-13 发布在 React

关注(0)|答案(2)|浏览(175)

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

// 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和/或Icon的height

react-native

来源：https://stackoverflow.com/questions/76207708/icon-and-text-in-button-not-aligned-vertically

2条答案

按热度按时间

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>

赞(0）回复(0）举报 2023-05-13

quhf5bfb2#

在网页底部的文档中，有一个Icon和Button的示例。
这个例子也适用于我：

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

赞(0）回复(0）举报 2023-05-13

我来回答

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

2条答案

相关问题

热门标签

最新问答