使用react本机元素无法识别样式化组件自定义字体

Question

我正在尝试用样式化的组件包装react原生元素Input组件，并使用自定义字体。

当我使用上面的代码时，一切都很好，字体显示正确：

<Input
placeholder={placeholder}
placeholderTextColor="white"
style={{ fontFamily: "Arimo-Italic" }}
autoCapitalize="none"
/>

此代码也可以工作(没有react原生元素组件(

export const StyledText = styled.Text`
color: white;
font-weight: bold;
text-align: right;
font-size: 30px;
font-family: Arimo;
`;

但是，当我试图用样式化的组件包装react原生元素输入组件时，我收到了这个错误无法识别的字体家族"Arimo">

这是我设计的组件代码：

import { Input } from "react-native-elements";
import styled from "styled-components";

export const StyledInput = styled(Input).attrs({
textAlign: "right",
fontFamily: "Arimo",
marginTop: 50,
inputContainerStyle: {
borderBottomColor: "#2f2f2f",
borderBottomWidth: "0.33px",
},
});

这是我的应用程序组件，具有加载字体功能：

function App() {
let [fontsLoaded] = useFonts({
Arimo: require("./assets/fonts/Arimo-Regular.ttf"),
"Arimo-Italic": require("./assets/fonts/Arimo-Italic.ttf"),
});

if (!fontsLoaded) {
return <AppLoading />;
} else {
return (
<NavigationContainer theme={MyTheme}>
<Stack.Navigator>
<Stack.Screen name="Login" component={Login} />
</Stack.Navigator>
</NavigationContainer>
);
}
}

export default App;

我正在我的iOS设备上运行代码

Answer 1

这适用于使用expo创建的应用程序，并且考虑到您已经使用expo字体在应用程序的某个位置导入了字体

就我个人而言，我不喜欢这种方法，我认为这个问题来自于样式组件，所以为了使用自定义字体，这种方法会起作用。您可以创建一个代理组件，例如：

// ./Styled.js (our styled component without a font-family property)
import styled from 'styled-components/native';

export const StyledTitle1 = styled.Text`
font-size: 18px;
`;
// ./Title1.jsx (our proxy component)
import React from 'react';
import { StyledTitle1 } from '../Styled';
function Title1 ({ children, ...rest }) {
const customStyles = rest.style ?? {};
return (
<StyledTitle1 {...rest} style={{ fontFamily: 'Roboto-Bold', ...customStyles }}>
{children}
</StyledTitle1>
)
}

export default Title1;

因此，fontFamily将仅在代理组件中使用，所有其他样式都可以集中到已设置样式的组件中。