React Native：实现图标居左、文本相对按钮居中的组件布局问题

嘿，作为React Native新手碰到这种布局问题太正常啦！你想让图标固定在按钮左侧，同时文本相对于整个TouchableHighlight居中，之前调内边距外边距只会撑大按钮，确实不是最简洁的办法。咱们换个思路用定位+Flex来搞定！

问题根源 #

你之前的代码里，Text的textAlign: 'center'只是针对文本自身的宽度生效，而不是整个按钮的宽度，所以才会出现图标和文本挤在一起，没法实现全局居中的情况。

解决方案代码 #

import React from 'react';
import { View, TouchableHighlight, Image, Text, StyleSheet } from 'react-native';

class App extends React.Component { 
  constructor(props) { 
    super(props); 
  } 

  render() { 
    return ( 
      <View style={styles.appContainer}>
        <TouchableHighlight onPress={() => {}} style={styles.button}>
          <View style={styles.btnContainer}>
            <Image source={require('./assets/ic_logout.png')} style={styles.icon} />
            <Text style={styles.btnText}>Log out</Text>
          </View>
        </TouchableHighlight>
      </View>
    ) 
  } 
} 

const styles = StyleSheet.create({
  appContainer: {
    flex: 1,
    backgroundColor: 'lightgreen',
    alignItems: 'center',
    justifyContent: 'center'
  },
  btnContainer: {
    backgroundColor: '#1d2aba',
    paddingHorizontal: 60,
    paddingVertical: 10,
    flexDirection: 'row',
    alignItems: 'center',
    borderRadius: 5,
    position: 'relative' // 设置为定位容器
  },
  button: {
    borderRadius: 5
  },
  icon: {
    transform: [{ rotate: '180deg'}],
    width: 25,
    height: 25,
    position: 'absolute', // 绝对定位脱离布局流
    left: 15 // 调整图标与按钮左侧的间距
  },
  btnText: {
    textAlign: 'center',
    fontWeight: 'bold',
    fontSize: 16,
    color: 'white',
    width: '100%' // 让文本占满按钮宽度，实现全局居中
  }
}); 

export default App;

为什么这样改？ #

• 给btnContainer加position: 'relative'，让它成为图标的定位参考，确保图标不会跑到按钮外面
• 图标用position: 'absolute'脱离正常布局流，这样它不会占用空间，也就不会影响文本的居中位置
• 给btnText设置width: '100%'，让textAlign: 'center'作用于整个按钮的宽度，文本就能完美相对于按钮居中了

这个方案不会额外撑大按钮，完全符合你要的简洁效果～

内容的提问来源于stack exchange，提问作者Franch