React Native：如何让Text与Image在同一行垂直居中

问题分析 #

你当前把Image内嵌在Text组件中的写法，在文本多行时会因Text的行高逻辑、系统字体缩放干扰，导致图片和文本无法稳定垂直居中。改用Flex布局容器来包裹文本和图片，能更可靠地实现需求。

修改后代码 #

app.tsx

import React from 'react';
import { View, Text, Image } from 'react-native';
import styles from './app.style';

const App = () => {
  return (
    <View style={styles.page}>
      <View style={styles.wrapper}>
        <Text style={styles.container} allowFontScaling={false}>
          this is msg this is msg this is msg
        </Text>
        <Image 
          source={require('src/assets/img/arrow.png')} 
          style={styles.image} 
        />
      </View>
    </View>
  );
};

export default App;

app.style.tsx

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  page: {
    width: '100%',
    height: '100%',
    paddingVertical: 100,
    backgroundColor: 'grey',
    justifyContent: 'flex-start',
    flexDirection: 'row',
    alignItems: 'center',
  },
  wrapper: {
    flexDirection: 'row',
    alignItems: 'center',
    maxWidth: 100,
    backgroundColor: 'green',
  },
  container: {
    flex: 1,
    lineHeight: 22,
  },
  image: {
    width: 9,
    height: 22,
    resizeMode: 'contain',
    backgroundColor: 'red',
  },
});

export default styles;

关键改动说明 #

• 布局结构调整：将Text和Image放在同一个View容器（wrapper）中，通过flexDirection: 'row'横向排列，alignItems: 'center'直接实现二者垂直居中。
• 文本换行处理：给Text设置flex: 1，让它自动占据容器剩余空间，实现多行文本换行。
• 屏蔽系统字体缩放：给Text添加allowFontScaling={false}，确保文本大小不受系统字体设置影响，从而稳定保持垂直居中效果。

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