图标 – React Native flex-box对齐图标和文本

发布时间：2020-12-15 20:40:45 所属栏目：百科来源：网络整理

导读：在本机应用程序中,我使用’react-native-vector-icons / MaterialIcons’. 我尝试了一个带有一些文字的按钮.不幸的是,图标未与文本对齐.该文本与但是底部对齐而不是中间对齐. 我没有flex：1.代码已更新. 我的代码 TouchableOpacity style={styles.navBarLeft

在本机应用程序中,我使用’react-native-vector-icons / MaterialIcons’.

我尝试了一个<带有一些文字的按钮.不幸的是,<图标未与文本对齐.该文本与<但是底部对齐而不是中间对齐. 我没有flex：1.代码已更新. 我的代码

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

我的风格

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

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

答案是flex：1而不是height.我也使用flexDirection：’row’,因为我有两个元素.

navBarLeftButton: {
  paddingLeft: 8,width: 100,flex: 1,justifyContent: 'flex-start'
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!