【问题标题】:React native paper component not pulling the proper font反应原生纸张组件没有拉出正确的字体
【发布时间】:2021-01-29 23:04:25
【问题描述】:

我的react-native-paper 组件textInput 没有拉出我设置的字体。

          <View style={styles.inputCon}>
            <TextInput
              multiline={true}
              label="Ime aktivnosti"
              mode="outlined"
              value={ime}
              onChangeText={(value) => {
                setIme(value);
              }}
            />
          </View>

我已经按照官方文档了解如何更改 RN Paper 组件的字体https://callstack.github.io/react-native-paper/fonts.html

const fontConfig = {
  default: {
    regular:{
    fontFamily: "Poppins_400Regular",
    fontWeight:'normal'
  },
  medium: {
    fontFamily: "Poppins_500Medium",
    fontWeight:'normal'
  },
  light: {
    fontFamily: "Poppins_300Light",
    fontWeight:'normal'
  },
  thin: {
    fontFamily: "Poppins_200ExtraLight",
    fontWeight:'normal'
  },
  bold: {
    fontFamily: "Poppins_700Bold",
    fontWeight:'normal'
  }
  },
};

const theme = {
  ...DefaultTheme,
  fonts: configureFonts(fontConfig),
};

同样来自react native paper 的另一个组件正确拉取字体

      <Searchbar
        placeholder="Type here..."
        onChangeText={text => this.searchItems(text)}
        value={this.state.value}
      />

【问题讨论】:

    标签: reactjs react-native react-native-paper


    【解决方案1】:
    import { configureFonts, DefaultTheme, Provider as PaperProvider } from 'react-native-paper';
    
    const theme = {
      ...DefaultTheme,
      fontFamily: {...DefaultTheme.fonts.regular.fontFamily = 'fontName'} 
    };
    
    export default class App extends Component {
      
      render() {
        const RootStack = createStackNavigator();
        return (
          <PaperProvider theme={theme}>
            <SafeAreaProvider>
            </SafeAreaProvider>
          </PaperProvider>
        );
      }
    

    react-native-cli: 2.0.1 反应原生:0.63.4

    【讨论】:

      猜你喜欢
      • 2017-03-08
      • 1970-01-01
      • 2021-08-05
      • 2023-03-26
      • 1970-01-01
      • 2020-02-04
      • 2018-07-20
      • 2017-12-08
      • 1970-01-01
      相关资源
      最近更新 更多