reactjs - 标准 React Native 组件的包装器在 Web 浏览器中不起作用

Question

在我的 React Native / Expo 应用程序中，我为标准组件编写了一些包装器，这些包装器带有我在应用程序中经常需要的基本样式。有一个包装器Text，它只分配标准字体系列和字体大小。这些样式也可以被覆盖。

组件：

import React from 'react';
import { Text } from 'react-native';
import { rsz } from 'shared/responsiveSize';

export const SimpleText = (props) => {

    return (
        <Text style={{...basicStyles, ...props.style}}>{props.children}</Text>
    );
}

const basicStyles = {
    fontFamily: 'lucida grande, tahoma, verdana, arial, sans-serif',
    fontWeight: 'bold',
    fontSize: rsz(16)
};

用法：

<SimpleText style={{fontSize: 32}}>Hello world</SimpleText>

在我的 Android 手机上的 Expo 应用程序中测试时它工作正常，但在 Google Chrome 的移动设备模拟器中，基本样式不会被组件实例的样式覆盖。模拟设备（iPhone、iPad、Google Pixel）无关紧要。

当然，网页视图只是为了测试，但由于我没有其他移动设备，我不能确定在任何其他平台上都不会出现同样的问题。

标签： reactjsreact-nativegoogle-chrome-devtoolsexpo