React Native fontWeight在iOS中无法使用

ss2ws0br  于 12个月前  发布在  React
关注(0)|答案(1)|浏览(231)

我在我的React Native应用程序中使用了一个简单的文本组件。然后fontWeight(仅粗体)不仅适用于iOS。我已经在项目中插入了所有需要的字体(所有字体都在Android上运行良好)。
这是我的项目设置。
root/react-native.config.js

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets:['/src/assets/fonts/']
}

字符串
package.json

{
  "name": "boldfont",
  "version": "0.0.1",
  "private": true,
  "rnpm": {
    "assets": [
      "./src/assets/fonts"
    ]
  },
...  ...  ...
}


root/src/assets/fonts/

我把所有这些字体都添加到了android/app/src/main/assets/fonts中。

That is my code.


Stext.js

import React from 'react';
import styled from 'styled-components/native';

function Stext({ ...props }) {
    return <Text {...props}>{props.children}</Text>
}

const Text = styled.Text`
    ${({ title, medium, small }) => {
        switch (true) {
            case title:
                return 'font-size: 48px;'
            case medium:
                return 'font-size: 20px;'
            case small:
                return 'font-size: 12px;'
            default:
                return 'font-size: 14px;'
        }
    }};

    ${({ PopBold, PopSemi, PopMedium }) => {
        switch (true) {
            case PopBold:
                return 'fontFamily: Poppins-Bold'
            case PopSemi:
                return 'fontFamily: Poppins-SemiBold'
            case PopMedium:
                return 'fontFamily: Poppins-Medium'
            default:
                return 'fontFamily: Poppins-Regular'
        }
    }}
`

export default Stext;


HomeScreen.js

import React from 'react'
import { View } from 'react-native'
import Stext from '../components/Stext'

export default function HomeScreen() {
  return (
    <View>
      <Stext PopBold>Android only</Stext>      // iOS not working
      <Stext PopSemi>Android and iOS</Stext>
      <Stext PopMedium>Android and iOS</Stext>
      <Stext>Android and iOS</Stext>
    </View>
  )
}

btxsgosb

btxsgosb1#

在iOS中,您必须使用姓氏,如{fontFamily: 'Poppins', fontWeight: 'bold'}
而在Android中,你必须包含全名和所有不同的变体,如{fontFamily: 'Poppins-Bold'},而不需要传递fontWeight。
我知道这很烦人,你可以使用Platform.select(...来解决它。
下面是一个示例代码:

const type = (family: string = "Poppins") => {
 return {
   semiBold: {
      fontFamily: Platform.select({ ios: family, android: `${family}-SemiBold` }), 
      fontWeight: Platform.select({ ios: "600" })
 },
   bold: {
      fontFamily: Platform.select({ ios: family, android: `${family}-Bold` }), 
      fontWeight: Platform.select({ ios: "700" })
 },
 }
}

字符串
还有一个有用的跨平台实用程序库,您可以使用https://github.com/lendup/react-native-cross-platform-text

相关问题