为什么我不能在本机反应中使用自定义 fonts

Question

even tho I did everything correctly my react app still dosen't change the font.

First I added

module.exports = {
  assets: ['./assets/fonts']
}

to react-native.config.js

then I created a folder in the assets folder and named it fonts and pasted all the fonts there

then I used this commmand npx react-native-asset

after that I added fontFamily: Poppins-Regular to the stylesheets and it dosen't work!

Please someone tell me what did I do wrong!

Here is my code:

import React from 'react';
import {Image, StyleSheet, Text, View, ImageBackground, Dimensions } from 'react-native';

const width_screen = Dimensions.get('window').width;
const hight_screen = Dimensions.get('window').height;

const card_size = {
  width:614,
  height:285,
}

let card_hight = 0;

if (width_screen < 614)
  card_hight = ((screen.width - 50) * card_size.height) / card_size.width;
  else
  card_hight = 285

const Card = () => {
  
  return (
    <ImageBackground 
    source={require('../assets/card1.png')}
    style={styles.card}>
      <View style={styles.card}>
      <Text>
          <img style={styles.image} src={require('../assets/user4.png')}/>
          <Text style={styles.cardNameText}>{'Bahez'}</Text>
          <Text style={styles.balance}>100<Text style={styles.usdt}>USDT</Text></Text>
        </Text>
        <img style={styles.settings} src={require('../assets/settings.png')}/>
        <Text style={styles.inviteCode}>Invite Code : 1225346</Text>
        
      </View>
    </ImageBackground>
  );
}

export default Card;

const styles = StyleSheet.create({
  card : {
    width: "100%",
    height : card_hight,
    maxHeight : 285,
    maxWidth: 614,

  },
  test : {
    backgroundColor : 'red',
  },
  cardNameText : {
    marginTop : 25,
    position : 'absolute',
    color : 'white',
    fontSize : 22,
    fontWeight : 500,
  },
  balance :{
    fontFamily : 'Poppins-Regular',
    position: 'absolute',
    top : 10,
    right: 20, 
    color : 'white',
    fontWeight : 800,
    fontSize : 25,
  },
  inviteCode : {
    position : 'absolute',
    bottom : 20,
    left : 25,
    color : 'white',
    fontWeight : 500,
  },
  settings : {
    width : 20,
    height : 20,
    position: 'absolute',
    bottom : 20,
    right: 25, 
  },
  usdt : {
    padding : 3,
    paddingTop : 15,
    fontSize : 13,
  },
  image: {
    padding : 20,
    width: 40,
    height: 40,
  }
});

Answer 1

Can you try to change the name of the font to this:

 balance :{
    fontFamily : 'Poppins',
    position: 'absolute',
    top : 10,
    right: 20, 
    color : 'white',
    fontSize : 25,
  },