我在我的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>
)
}
型
1条答案
按热度按时间btxsgosb1#
在iOS中,您必须使用姓氏,如
{fontFamily: 'Poppins', fontWeight: 'bold'}
而在Android中,你必须包含全名和所有不同的变体,如
{fontFamily: 'Poppins-Bold'}
,而不需要传递fontWeight。我知道这很烦人,你可以使用
Platform.select(...
来解决它。下面是一个示例代码:
字符串
还有一个有用的跨平台实用程序库,您可以使用https://github.com/lendup/react-native-cross-platform-text