Question

！！React Native 和 RN Paper 的初学者。

我正在尝试使用 React Native Paper 元素，例如 Button 和 TextInput。我像下面的代码一样对按钮进行编码，

<Button
  icon="camera"
  mode="contained"
  loading="true"
  style={styles.button}
  contentStyle={{
    height: 50,
    backgroundColor: "#2196f3",
  }}
  labelStyle={{
    fontFamily: "Raleway-Bold",
    fontSize: 15,
  }}
>
  Login button
</Button>

使用此代码，我可以获得带有相机图标的按钮。

但是当我开始使用 Font.loadAsync 加载自定义字体以加载自定义字体（Raleway-Bold）时，问题就开始了。

import { Button, TextInput } from "react-native-paper";

import {
  View,
  TouchableWithoutFeedback,
  Keyboard,
  TouchableOpacity,
} from "react-native";

const Login = () => {
  return (
        <View >
            <Button
              icon="camera"
              mode="contained"
              loading="true"
            >
              Login button
            </Button>
          </TouchableOpacity>
        </View>
  );
};

export default Login;

在 app.js 中，我使用

加载了自定义字体

Font.loadAsync({"Raleway-Bold": require("./assets/fonts/Raleway-SemiBold.ttf")})

在此之后，我收到了类似的错误

<块引用>

fontFamily“Material Design Icons”不是系统字体，也没有已通过 Font.loadAsync 加载。

如果您打算使用系统字体，请确保您输入的名称正确并且您的设备操作系统支持该名称。
如果这是自定义字体，请务必使用 Font.loadAsync 加载它。

有人遇到过类似的问题吗？

注意：使用最新的世博会版本。

提前感谢您的时间。

Answer 1

这就是我在 React Native expo 应用程序中加载字体的方式，它运行良好，希望能有所帮助：

导入 AppLoading 和 expo-font：

import { AppLoading } from 'expo'
import * as Font from 'expo-font'

编写 FetchFonts 函数：

const fetchFonts = () => {
    return Font.loadAsync({
    montregular: require('../../../assets/fonts/Montserrat-Regular.ttf'),
    montsemibold: require('../../../assets/fonts/Montserrat-SemiBold.ttf'),
    montbold: require('../../../assets/fonts/Montserrat-Bold.ttf')
    });
}

为您的州添加一个标志：

const [fontsLoaded, setFontsLoaded] = useState(false);

在你的渲染方法中，有条件地渲染：

if(!fontsLoaded) return (   
        <AppLoading
        startAsync={fetchFonts}
        onFinish={() => setFontsLoaded(true)}
      />
  );
else return (
<View>
   Your screen code.....
</View
);

使用自定义字体和按钮与使用 react-native-paper 的图标

1 个答案: