如何为输入(react-native-elements)标签设置 fontFamily?
How to set fontFamily for an input (react-native-elements) label?
fontFamily
在 react-native-elements
的 Input
组件的 labelStyle
属性上不起作用。我错过了什么?
我正在使用 react 16.8.6、react-native 0.60.4 和 react-native-elements 1.1.0。我一直在我的整个应用程序中使用这个字体系列 (Arciform),到目前为止它一直有效。
样式表代码 - 文件 definicoesBase
export const definicoesBase = {
tamanhoFonteTextoComum : 16,
alturaLinhaTextoComum : 22,
fontFamilyTextoComum : 'Arciform',
corFonteTextoCabecalho : "#fff",
tamanhoFonteTextoCabelho: 20,
corFonteTextoComum : "#212121",
corFonteTextoAvaliacao : "#e7a74e",
fontWeightCabecalho:"bold",
backgroundGeral : "#fff",
backgroundAnuncio : "#FFF",
corBordaAnuncio : "#bdbdbd",
corBarraSlider : "#bdbdbd",
corBotaoSlider : "#0288d1",
backgroundCabecalho : "#0288d1",
};
样式表代码 - 文件 StyleFaleConosco
import { StyleSheet } from "react-native";
import StyleBase, { definicoesBase } from "./StyleBase";
const StyleFaleConosco = StyleSheet.create({
...
corpoText:{
fontFamily: definicoesBase.fontFamilyTextoComum,
fontSize: definicoesBase.tamanhoFonteTextoComum,
color: definicoesBase.corFonteTextoComum,
lineHeight: definicoesBase.alturaLinhaTextoComum
},
...
});
export default StyleFaleConosco;
输入文件代码
import React, { Component } from "react";
import { ScrollView, Linking, Text, TouchableOpacity, View, BackHandler } from "react-native";
import { Input, Icon } from "react-native-elements";
import StyleFaleConosco from "../../styles/StyleFaleConosco";
import { navigationOptions } from "../../styles/StyleBase";
export default class FaleConosco extends Component {
...
render() {
return (
...
state = {
titulo: "",
descricao: ""
};
...
<Input
label="Título"
labelStyle={StyleFaleConosco.corpoText}
onChangeText={titulo => this.setState({ titulo })}
/>
...
<Input
label="Descreva o seu problema/sugestão"
onChangeText={descricao => this.setState({ descricao })}
multiline={true}
numberOfLines={4}
containerStyle={{ width: '90%', }}
labelStyle={StyleFaleConosco.corpoText}
inputContainerStyle={{
borderWidth: 1,
borderRadius: 5,
}}
/>
...
);
}
}
它一直显示这 2 个标签的默认 fontFamily 而不是 Arciform。
设置字体粗细为'normal':
<Input
labelStyle={{
color: 'white',
fontFamily: 'Montserrat-Light',
fontWeight: 'normal'
}}
editable={false}
autoCapitalize="none"
autoCorrect={false}
label="EMAIL ADDRESS"
/>
fontFamily
在 react-native-elements
的 Input
组件的 labelStyle
属性上不起作用。我错过了什么?
我正在使用 react 16.8.6、react-native 0.60.4 和 react-native-elements 1.1.0。我一直在我的整个应用程序中使用这个字体系列 (Arciform),到目前为止它一直有效。
样式表代码 - 文件 definicoesBase
export const definicoesBase = {
tamanhoFonteTextoComum : 16,
alturaLinhaTextoComum : 22,
fontFamilyTextoComum : 'Arciform',
corFonteTextoCabecalho : "#fff",
tamanhoFonteTextoCabelho: 20,
corFonteTextoComum : "#212121",
corFonteTextoAvaliacao : "#e7a74e",
fontWeightCabecalho:"bold",
backgroundGeral : "#fff",
backgroundAnuncio : "#FFF",
corBordaAnuncio : "#bdbdbd",
corBarraSlider : "#bdbdbd",
corBotaoSlider : "#0288d1",
backgroundCabecalho : "#0288d1",
};
样式表代码 - 文件 StyleFaleConosco
import { StyleSheet } from "react-native";
import StyleBase, { definicoesBase } from "./StyleBase";
const StyleFaleConosco = StyleSheet.create({
...
corpoText:{
fontFamily: definicoesBase.fontFamilyTextoComum,
fontSize: definicoesBase.tamanhoFonteTextoComum,
color: definicoesBase.corFonteTextoComum,
lineHeight: definicoesBase.alturaLinhaTextoComum
},
...
});
export default StyleFaleConosco;
输入文件代码
import React, { Component } from "react";
import { ScrollView, Linking, Text, TouchableOpacity, View, BackHandler } from "react-native";
import { Input, Icon } from "react-native-elements";
import StyleFaleConosco from "../../styles/StyleFaleConosco";
import { navigationOptions } from "../../styles/StyleBase";
export default class FaleConosco extends Component {
...
render() {
return (
...
state = {
titulo: "",
descricao: ""
};
...
<Input
label="Título"
labelStyle={StyleFaleConosco.corpoText}
onChangeText={titulo => this.setState({ titulo })}
/>
...
<Input
label="Descreva o seu problema/sugestão"
onChangeText={descricao => this.setState({ descricao })}
multiline={true}
numberOfLines={4}
containerStyle={{ width: '90%', }}
labelStyle={StyleFaleConosco.corpoText}
inputContainerStyle={{
borderWidth: 1,
borderRadius: 5,
}}
/>
...
);
}
}
它一直显示这 2 个标签的默认 fontFamily 而不是 Arciform。
设置字体粗细为'normal':
<Input
labelStyle={{
color: 'white',
fontFamily: 'Montserrat-Light',
fontWeight: 'normal'
}}
editable={false}
autoCapitalize="none"
autoCorrect={false}
label="EMAIL ADDRESS"
/>