为什么文本在 android 上的 React Native 中不与另一个文本垂直对齐

Question

我在使用 React Native 时遇到了在 Android 组件内垂直对齐文本的问题。文本在 Web 平台上正确对齐，但在 Android 设备上呈现时未对齐。我尝试了各种对齐属性和样式，但未能实现所需的垂直定位。

安卓：

“忽略第一个”

网页：

代码：

import { StyleSheet, Text, View } from "react-native";
import Appbar from "../components/Appbar";
import { Link } from "expo-router";

export default function Home() {
  return (
    <View>
      <Appbar/>
      <View style={styles.cardsWrapper}>
        <Link href="/ayat" style={styles.pill}>
          <Text style={styles.emoji}>😀</Text>
          <View style={styles.title}><Text>Happy</Text></View>
        </Link>
        <Link href="/ayat" style={styles.pill}>
          <Text style={styles.emoji}>🙁</Text>
          <Text style={styles.title}>Sad</Text>
        </Link>
        <Link href="/ayat" style={styles.pill}>
          <Text style={styles.emoji}>😠</Text>
          <Text style={styles.title}>Angry</Text>
        </Link>
    
        <Link href="/ayat" style={styles.pill}>
          <Text style={styles.emoji}>🥺</Text>
          <Text style={styles.title}>Lonely</Text>
        </Link>
    
        <Link href="/ayat" style={styles.pill}>
          <Text style={styles.emoji}>😰</Text>
          <Text style={styles.title}>Anxious</Text>
        </Link>
    
        <Link href="/ayat" style={styles.pill}>
          <Text style={styles.emoji}>😊</Text>
          <Text style={styles.title}>Thankful</Text>
        </Link>
       </View>
    </View>
  );
}

const styles = StyleSheet.create({
  cardsWrapper: {
    flexDirection: "row",
    margin: 20,
    flexWrap: "wrap",
  },
  pill: {
    margin: 10,
    paddingVertical: 10,
    paddingHorizontal: 16,
    display: "flex",
    alignItems: "center",
    borderRadius: 99,
    backgroundColor: "#d9bcdf",
    cursor: "pointer"
  },
  emoji: {
    fontSize: 50,
    backgroundColor: "#ff00ff",
    marginRight: 10
  },
  title: {
    display: "flex",
    justifyContent: "flex-start",
    alignItems: "flex-start",
    fontSize: 16,
    backgroundColor: "#ff0000"
  }
});

文本应与表情符号垂直对齐。我不知道我做错了什么。

编辑：

我忘了提及，表情符号的

marginRight

在 Android 上也不起作用，但在 Web 上运行良好。

Answer 1

添加一个容器以将项目在

pill

内垂直居中。像这样的东西：

<Link href="/ayat" style={styles.pill}>
  <View style={styles.pillContainer}>
    <Text style={styles.emoji}>😀</Text>
    <Text style={styles.title}>Happy</Text>
  </View>
</Link>

const styles = StyleSheet.create({
  pill: {
    margin: 10,
    paddingVertical: 10,
    paddingHorizontal: 16,
    borderRadius: 99,
    backgroundColor: '#d9bcdf',
    cursor: 'pointer',
  },
  pillContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  emoji: {
    fontSize: 50,
    backgroundColor: '#ff00ff',
    marginRight: 20,
  },
  title: {
    fontSize: 16,
    backgroundColor: '#ff0000',
  },
});