[英]Using custom fonts and, button with icons using react-native-paper
.!Beginner to React Native and RN Paper. .!React Native 和 RN 论文的初学者。
I'm trying to use React Native Paper elements like Button and TextInput.我正在尝试使用 React Native Paper 元素,例如 Button 和 TextInput。 I coded the button like below code,
我像下面的代码一样对按钮进行了编码,
<Button
icon="camera"
mode="contained"
loading="true"
style={styles.button}
contentStyle={{
height: 50,
backgroundColor: "#2196f3",
}}
labelStyle={{
fontFamily: "Raleway-Bold",
fontSize: 15,
}}
>
Login button
</Button>
With this code, I was able to get a button with Camera icon.使用此代码,我可以获得一个带有相机图标的按钮。
But the problem started when I started to load my custom fonts with Font.loadAsync for loading custom fonts (Raleway-Bold).但是,当我开始使用 Font.loadAsync 加载自定义 fonts 以加载自定义 fonts(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;
In app.js I've loaded the custom fonts using在 app.js 我已经加载了自定义 fonts 使用
Font.loadAsync({"Raleway-Bold": require("./assets/fonts/Raleway-SemiBold.ttf")})
After this, I'm getting errors like,在此之后,我收到类似的错误,
fontFamily "Material Design Icons" is not a system font and has not been loaded through Font.loadAsync.
fontFamily“Material Design Icons”不是系统字体,还没有通过 Font.loadAsync 加载。
If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.
如果您打算使用系统字体,请确保您输入了正确的名称并且您的设备操作系统支持该名称。
If this is a custom font, be sure to load it with Font.loadAsync.
如果这是自定义字体,请务必使用 Font.loadAsync 加载它。
Anyone have faced similar kinds of issues?有人遇到过类似的问题吗?
Note: Using the latest expo version.注意:使用最新的 expo 版本。
Thanks in Advance for your time.在此先感谢您的时间。
This is how I load fonts in my react native expo app and it works fine, hope that will help:这就是我在我的反应原生 expo 应用程序中加载 fonts 的方式,它工作正常,希望对您有所帮助:
Import AppLoading & expo-font:导入 AppLoading 和展览字体:
import { AppLoading } from 'expo'
import * as Font from 'expo-font'
Write FetchFonts function:编写 FetchFonts function:
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')
});
}
Add a flag to your state:在您的 state 中添加一个标志:
const [fontsLoaded, setFontsLoaded] = useState(false);
In you render method, render conditionally:在您的渲染方法中,有条件地渲染:
if(!fontsLoaded) return (
<AppLoading
startAsync={fetchFonts}
onFinish={() => setFontsLoaded(true)}
/>
);
else return (
<View>
Your screen code.....
</View
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.