使用自定义字体和按钮，使用 react-native-paper答案

【问题标题】：Using custom fonts and, button with icons using react-native-paper使用自定义字体和按钮，使用 react-native-paper
【发布时间】：2021-04-11 16:00:48
【问题描述】：

!!React Native 和 RN 论文的初学者。

我正在尝试使用 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 加载它。

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

注意：使用最新的 expo 版本。

提前感谢您的宝贵时间。

【问题讨论】：

标签： react-native expo react-native-paper

【解决方案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
);

【讨论】：