React Native alignItems: baseline 在 Android 下失效解决方案

太过爱你忘了你带给我的痛 2022-04-23 14:18 456阅读 0赞

### 问题 ###

在项目中，把不同 `font-size` 的字放在一起，是一个很常见的需求，我们可以这样：

import React, {  Component } from 'react';
    import {  Text, View } from 'react-native';
    
    export default class App extends Component { 
      render() { 
        return (
          <View style={ { 
            margin: 60,
            flexDirection: 'row',
            alignItems: 'baseline',
            backgroundColor: '#F3F3F3',
          }}>
            <Text style={ { fontSize: 98}}>A</Text>
            <Text style={ { fontSize: 76}}>B</Text>
            <Text style={ { fontSize: 54}}>O</Text>
            <Text style={ { fontSize: 42}}>B</Text>
            <Text style={ { fontSize: 30}}>A</Text>
          </View>
        );
      }
    }

我们已经在外部容器 `View` 设置了 `alignItems: 'baseline'`，在 iOS 上可以正常根据 `baseline` 对齐，可是在 Android 会变成这样：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3a2trazE_size_16_color_FFFFFF_t_70]

### 解决方法 ###

下面来介绍一种解决此问题的方法，可以达到我们想要**不同字号的字对齐展示**的需求：

将外部 `View` 组件改为 `Text` 组件，形成嵌套 `Text` 组件

import React, {  Component } from 'react';
    import {  Text } from 'react-native';
    
    export default class App extends Component { 
      render() { 
        return (
          <Text style={ { 
            margin: 60,
            backgroundColor: '#F3F3F3',
          }}>
            <Text style={ { fontSize: 98}}>A</Text>
            <Text style={ { fontSize: 76}}>B</Text>
            <Text style={ { fontSize: 54}}>O</Text>
            <Text style={ { fontSize: 42}}>B</Text>
            <Text style={ { fontSize: 30}}>A</Text>
          </Text>
        );
      }
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3a2trazE_size_16_color_FFFFFF_t_70 1]

这样就能达到我们的需求了~

### 副作用 ###

在官方手册中，我们可以知道，如果 `Text` 嵌套 `Text`，`Text` 内部将不再是 flexbox 布局，而是纯文本布局。这意味着，内部 `Text` 组件设置长宽间距都会没有效果(如 `margin`)。而且 `Text` 只能嵌套 `Text` 组件，嵌套其他组件在 Android 下时会报错的。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3a2trazE_size_16_color_FFFFFF_t_70]: /images/20220308/b3a7a9583fc24299928930a1c635c790.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3a2trazE_size_16_color_FFFFFF_t_70 1]: /images/20220308/b41f3ecdac8541f3aaab3b15b648db3e.png