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

问题描述

我正在尝试使用样式组件包装 react-native-elements Input 组件并使用自定义字体。

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

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

这段代码也能工作（没有 react-native-elements 组件）

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

但是，当我尝试使用样式组件包装 react-native-elements 输入组件时，我收到此错误无法识别的字体系列“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 设备上运行代码

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）