มีการเทียบเท่ากับ CSS นี้ใน React Native หรือไม่เพื่อให้แอปใช้แบบอักษรเดียวกันทุกที่

body {
  font-family: 'Open Sans';
}

การนำไปใช้ด้วยตนเองในทุกโหนดข้อความดูเหมือนจะซับซ้อนเกินไป

วิธีที่แนะนำคือสร้างส่วนประกอบของคุณเองเช่น MyAppText MyAppText จะเป็นส่วนประกอบง่ายๆที่แสดงผลองค์ประกอบข้อความโดยใช้สไตล์สากลของคุณและสามารถส่งผ่านอุปกรณ์ประกอบฉากอื่น ๆ เป็นต้น

https://facebook.github.io/react-native/docs/text.html#limited-style-inheritance

นอกจากนั้นเมื่อเร็ว ๆ นี้โมดูลโหนดที่ทำที่แก้ปัญหานี้เพื่อให้คุณไม่ต้องสร้างองค์ประกอบอื่น

https://github.com/Ajackster/react-native-global-props

https://www.npmjs.com/package/react-native-global-props

เอกสารระบุว่าในส่วนประกอบลำดับสูงสุดของคุณให้นำเข้าsetCustomTextฟังก์ชันเช่นนั้น

import { setCustomText } from 'react-native-global-props';

จากนั้นสร้างสไตล์ / อุปกรณ์ประกอบฉากแบบกำหนดเองที่คุณต้องการสำหรับTextคอมโพเนนต์ตอบสนองเนทีฟ ในกรณีของคุณคุณต้องการให้fontFamilyทำงานกับทุกTextองค์ประกอบ

const customTextProps = { 
  style: { 
    fontFamily: yourFont
  }
}

เรียกใช้setCustomTextฟังก์ชันและส่งอุปกรณ์ประกอบฉาก / สไตล์ของคุณเข้าไปในฟังก์ชัน

setCustomText(customTextProps);

จากนั้นTextส่วนประกอบที่ตอบสนองดั้งเดิมทั้งหมดจะมีfontFamily ที่คุณประกาศไว้พร้อมกับอุปกรณ์ประกอบฉาก / สไตล์อื่น ๆ ที่คุณมีให้

สำหรับ React Native 0.56.0+ ให้ตรวจสอบว่า defaultProps ถูกกำหนดก่อนหรือไม่:

Text.defaultProps = Text.defaultProps || {}

จากนั้นเพิ่ม:

Text.defaultProps.style =  { fontFamily: 'some_font' }

เพิ่มด้านบนในตัวสร้างของไฟล์ App.js (หรือส่วนประกอบรูทที่คุณมี)

ในการลบล้างสไตล์คุณสามารถสร้างสไตล์ออบเจ็กต์และกระจายจากนั้นเพิ่มสไตล์เพิ่มเติมของคุณ (เช่น{ ...baseStyle, fontSize: 16 })

คุณสามารถแทนที่ลักษณะการทำงานของข้อความได้โดยเพิ่มสิ่งนี้ในส่วนประกอบใด ๆ ของคุณโดยใช้ข้อความ:

let oldRender = Text.prototype.render;
Text.prototype.render = function (...args) {
    let origin = oldRender.call(this, ...args);
    return React.cloneElement(origin, {
        style: [{color: 'red', fontFamily: 'Arial'}, origin.props.style]
    });
};

แก้ไข: เนื่องจาก React Native 0.56 Text.prototypeไม่ทำงานอีกต่อไป คุณต้องลบ.prototype:

let oldRender = Text.render;
Text.render = function (...args) {
    let origin = oldRender.call(this, ...args);
    return React.cloneElement(origin, {
        style: [{color: 'red', fontFamily: 'Arial'}, origin.props.style]
    });
};

ด้วย React-Native 0.56 วิธีการเปลี่ยนข้างต้นText.prototype.renderไม่ได้ผลอีกต่อไปดังนั้นคุณต้องใช้ส่วนประกอบของคุณเองซึ่งสามารถทำได้ในบรรทัดเดียว!

MyText.js

export default props => <Text {...props} style={[{fontFamily: 'Helvetica'}, props.style]}>{props.children}</Text>

AnotherComponent.js

import Text from './MyText';

...
<Text>This will show in default font.</Text>
...

เพิ่มฟังก์ชั่นนี้ลงในAppองค์ประกอบรากของคุณแล้วเรียกใช้จากตัวสร้างของคุณหลังจากเพิ่มแบบอักษรของคุณโดยใช้คำแนะนำเหล่านี้ https://medium.com/react-native-training/react-native-custom-fonts-ccc9aacf9e5e

import {Text, TextInput} from 'react-native'

SetDefaultFontFamily = () => {
    let components = [Text, TextInput]

    const customProps = {
        style: {
            fontFamily: "Rubik"
        }
    }

    for(let i = 0; i < components.length; i++) {
        const TextRender = components[i].prototype.render;
        const initialDefaultProps = components[i].prototype.constructor.defaultProps;
        components[i].prototype.constructor.defaultProps = {
            ...initialDefaultProps,
            ...customProps,
        }
        components[i].prototype.render = function render() {
            let oldProps = this.props;
            this.props = { ...this.props, style: [customProps.style, this.props.style] };
            try {
                return TextRender.apply(this, arguments);
            } finally {
                this.props = oldProps;
            }
        };
    }
}

สายสุด ๆ สำหรับหัวข้อนี้ แต่นี่ไป

TLDR; เพิ่มบล็อกต่อไปนี้ในไฟล์AppDelegate.m

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{

 ....
    // HERE: replace "Verlag" with your font
  [[UILabel appearance] setFont:[UIFont fontWithName:@"Verlag" size:17.0]];
  ....
}

บทสรุปของการไหลทั้งหมด

มีสองสามวิธีที่คุณสามารถทำได้นอกเหนือจากการใช้ปลั๊กอินเช่นreact-native-global-propsIll จะแนะนำคุณทีละขั้นตอน

การเพิ่มแบบอักษรลงในแพลตฟอร์ม

วิธีเพิ่มแบบอักษรในโครงการ IOS

ก่อนอื่นมาสร้างที่ตั้งสำหรับสินทรัพย์ของเรา มาสร้างไดเร็กทอรีต่อไปนี้ที่รูทของเรา

``

ios/
static/
       fonts/

``

ตอนนี้ให้เพิ่ม NPM "React Native" ใน package.json ของเรา

  "rnpm": {
    "static": [
   "./static/fonts/"
    ]
  }

ตอนนี้เราสามารถเรียกใช้ "ลิงก์ตอบกลับ" เพื่อเพิ่มเนื้อหาของเราไปยังแอปเนทีฟของเรา

ตรวจสอบหรือดำเนินการด้วยตนเอง

ที่ควรเพิ่มชื่อฟอนต์ของคุณลงในโปรเจ็กต์.plist (สำหรับผู้ใช้โค้ด VS รันcode ios/*/Info.plistเพื่อยืนยัน)

สมมติว่าVerlagเป็นแบบอักษรที่คุณเพิ่มควรมีลักษณะดังนี้:

     <dict>
   <plist>
      .....
      <key>UIAppFonts</key>
      <array>
         <string>Verlag Bold Italic.otf</string>
         <string>Verlag Book Italic.otf</string>
         <string>Verlag Light.otf</string>
         <string>Verlag XLight Italic.otf</string>
         <string>Verlag XLight.otf</string>
         <string>Verlag-Black.otf</string>
         <string>Verlag-BlackItalic.otf</string>
         <string>Verlag-Bold.otf</string>
         <string>Verlag-Book.otf</string>
         <string>Verlag-LightItalic.otf</string>
      </array>
      ....    
</dict>
</plist>

ตอนนี้คุณได้จับคู่พวกเขาแล้วตอนนี้เรามาตรวจสอบให้แน่ใจว่ามีอยู่จริงและกำลังโหลด (นี่คือวิธีที่คุณทำด้วยตนเอง)

ไปที่"Build Phase" > "Copy Bundler Resource"หากไม่ได้ผลคุณจะต้องเพิ่มด้วยตนเองที่นี่

รับชื่อแบบอักษร (รู้จักโดย XCode)

ก่อนอื่นให้เปิดบันทึก XCode ของคุณเช่น:

จากนั้นคุณสามารถเพิ่มบล็อกต่อไปนี้ในของคุณAppDelegate.mเพื่อบันทึกชื่อของฟอนต์และตระกูลฟอนต์

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    .....


  for (NSString* family in [UIFont familyNames])
  {
    NSLog(@"%@", family);
    for (NSString* name in [UIFont fontNamesForFamilyName: family])
    {
      NSLog(@" %@", name);
    }
  }

  ...
}

เมื่อคุณเรียกใช้คุณจะพบแบบอักษรของคุณหากโหลดอย่างถูกต้องที่นี่เราพบของเราในบันทึกดังนี้:

2018-05-07 10:57:04.194127-0700 MyApp[84024:1486266] Verlag
2018-05-07 10:57:04.194266-0700 MyApp[84024:1486266]  Verlag-Book
2018-05-07 10:57:04.194401-0700 MyApp[84024:1486266]  Verlag-BlackItalic
2018-05-07 10:57:04.194516-0700 MyApp[84024:1486266]  Verlag-BoldItalic
2018-05-07 10:57:04.194616-0700 MyApp[84024:1486266]  Verlag-XLight
2018-05-07 10:57:04.194737-0700 MyApp[84024:1486266]  Verlag-Bold
2018-05-07 10:57:04.194833-0700 MyApp[84024:1486266]  Verlag-Black
2018-05-07 10:57:04.194942-0700 MyApp[84024:1486266]  Verlag-XLightItalic
2018-05-07 10:57:04.195170-0700 MyApp[84024:1486266]  Verlag-LightItalic
2018-05-07 10:57:04.195327-0700 MyApp[84024:1486266]  Verlag-BookItalic
2018-05-07 10:57:04.195510-0700 MyApp[84024:1486266]  Verlag-Light

ตอนนี้เรารู้แล้วว่ามันโหลดVerlagตระกูลและเป็นฟอนต์ในตระกูลนั้น

• Verlag-Book
• Verlag-BlackItalic
• Verlag-BoldItalic
• Verlag-XLight
• Verlag-Bold
• Verlag-Black
• Verlag-XLightItalic
• Verlag-LightItalic
• Verlag-BookItalic
• Verlag-Light

ตอนนี้เป็นชื่อที่คำนึงถึงตัวพิมพ์เล็กและใหญ่ที่เราสามารถใช้ในตระกูลแบบอักษรของเราที่เราสามารถใช้ในแอปตอบกลับ

Got -'em ตั้งค่าแบบอักษรเริ่มต้นแล้ว

จากนั้นตั้งค่าแบบอักษรเริ่มต้นเพื่อเพิ่มชื่อตระกูลแบบอักษรของคุณ AppDelegate.mด้วยบรรทัดนี้

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{

 ....
    // ADD THIS LINE (replace "Verlag" with your font)

  [[UILabel appearance] setFont:[UIFont fontWithName:@"Verlag" size:17.0]];
  ....
}

เสร็จแล้ว

ที่เหมาะกับฉัน: เพิ่มแบบอักษรที่กำหนดเองใน React Native

ดาวน์โหลดฟอนต์ของคุณและวางไว้ในโฟลเดอร์ assets / ฟอนต์เพิ่มบรรทัดนี้ใน package.json

 "rnpm": {
"assets": ["assets/fonts/Sarpanch"]}

จากนั้นเปิดเทอร์มินัลและรันคำสั่งนี้: ลิงก์ตอบกลับเนทีฟ

ตอนนี้คุณพร้อมแล้ว สำหรับรายละเอียดเพิ่มเติมขั้นตอน เยี่ยมชมลิงค์ที่กล่าวถึงข้างต้น

เพิ่ม

"rnpm": {
  "assets": [
 "./assets/fonts/"
  ]
}

ในการpackage.json เรียกใช้แล้วreact-native link

ตั้งค่าใน package.json

"rnpm": {
  "assets": [
     "./assets/fonts/"
  ]
}

และลิงก์ลิงก์ตอบสนองดั้งเดิม