react-native - 反应原生元素无法识别样式化组件自定义字体

Question

我正在尝试用 styled-components 包装 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;
`;

但是，当我尝试用 styled-components 包装 react-native-elements Input 组件时，我收到此错误Unrecognized font family '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 设备上运行代码

标签： react-nativeexpostyled-componentsreact-native-elements