React Native弹性盒对齐图标和文本 [英] React Native flex-box align icon and text

问题描述

在一个反应原生应用程序中，我使用'react-native-vector-icons / MaterialIcons' / p>

我用一些文字尝试一个< 按钮。不幸的是，< 图标没有与文本居中对齐。文本与< 相同，但是底部对齐，而不是中间对齐。

我没有 flex：1 。代码已被更新。

我的代码

 < TouchableOpacity风格= {styles.navBarLeftButton}> 
<图标名称=chevron-left/> 
< Text style = {styles.buttonText}>我的按钮< / Text> 
< / TouchableOpacity> 
  

我的风格

  navBarLeftButton：{
 flex：1，
 flexDirection：'row'，
 alignItems：'center'，
 justifyContent：'flex-start'
 width：100，
 paddingLeft：8 
} 
 
 buttonText：{
 color：'rgba（255,255,255,0.70）'，
 fontSize：14 
 
  

解决方案

答案是有 flex：1 而不是 height 。我还使用 flexDirection：'row'，因为我有两个元素。

  navBarLeftButton：{
 paddingLeft：8，
 width：100，
 flex：1，
 flexDirection：'row'，
 alignItems：'center'，
 justifyContent：'flex-start'
} 
  

In a react native app, I use 'react-native-vector-icons/MaterialIcons'.

I try to a < button with some text. Unfortunately, the < icon isn't aligned center with the text. The text is on same line as the < but bottom-aligned instead of middle-aligned.

I didn't have flex: 1. The code has been updated.

My code

    <TouchableOpacity style={styles.navBarLeftButton}>
       <Icon name="chevron-left" />
       <Text style={styles.buttonText}>My Button</Text>
    </TouchableOpacity>

My styles

    navBarLeftButton: {
      flex: 1,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'flex-start'
      width: 100,
      paddingLeft: 8
    }

    buttonText: {
      color: 'rgba(255,255,255,0.70)',
      fontSize: 14
    }

解决方案

The answer is to have flex: 1 and not height. I also use flexDirection: 'row' because I have two elements.

navBarLeftButton: {
  paddingLeft: 8,
  width: 100,
  flex: 1,
  flexDirection: 'row',
  alignItems: 'center',
  justifyContent: 'flex-start'
}

这篇关于React Native弹性盒对齐图标和文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！