Làm cách nào để đặt họ phông chữ mặc định trong React Native?

98

Có tương đương với CSS này trong React Native để ứng dụng sử dụng cùng một phông chữ ở mọi nơi không?

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

Việc áp dụng nó theo cách thủ công trên mọi nút Văn bản có vẻ quá phức tạp.

react-native 
— Dagobert Renouf
nguồn
1
Có câu trả lời hoàn hảo nào cho câu hỏi này không ??? Tôi không muốn gọi bất kỳ styles.text hay bất kỳ thứ gì tương tự.
— MD Ashik

Câu trả lời:

70

Cách được khuyến nghị là tạo thành phần của riêng bạn, chẳng hạn như MyAppText. MyAppText sẽ là một thành phần đơn giản hiển thị thành phần Văn bản bằng cách sử dụng kiểu phổ quát của bạn và có thể chuyển qua các đạo cụ khác, v.v.

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

— David E. Chen
nguồn
2
Cảm ơn đó chính xác là những gì tôi cần. Có vẻ như tôi đã không nắm bắt được phương pháp thành phần sâu sắc đủ chưa :)
— Dagobert Renouf
2
Một điều không quá rõ ràng từ tài liệu là cách chuyển qua các thuộc tính trong thành phần của bạn và tôn trọng các kiểu trên thành phần của bạn. Bạn có thể làm như vậy như thế này: gist.github.com/neilsarkar/c9b5fc7e67bbbe4c407eec17deb7311e
— Neil Sarkar
1
@NeilSarkar Một vấn đề với ví dụ chính đó là kiểu được tạo trong hàm tạo. Do đó, nếu style prop thay đổi, bạn sẽ muốn nó hiển thị lại, nhưng trong trường hợp này thì không. Nó nên được xử lý trong render()thay vì hàm tạo. Sử dụng móc với useMemocũng có thể hữu ích nếu hiệu quả là quan trọng. Ngoài ra, nếu bạn muốn giữ nó trong phương thức khởi tạo, điều quan trọng là phải thêm một componentDidUpdatelogic cập nhật this.stylekhi thành phần cập nhật do thay đổi kiểu hỗ trợ.
— Fernando Rojo
điểm tốt, cảm ơn! có vẻ như ai đó đã thêm một phiên bản được tái cấu trúc vào ý chính kết hợp các kiểu trong phương thức kết xuất (của một thành phần thuần túy, trong trường hợp của họ)
— Neil Sarkar
58

Gần đây có một mô-đun nút đã được tạo ra để giải quyết vấn đề này, do đó bạn không phải tạo một thành phần khác .

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

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

Tài liệu nói rằng trong thành phần thứ tự cao nhất của bạn, hãy nhập setCustomTexthàm như vậy.

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

Sau đó, tạo kiểu / đạo cụ tùy chỉnh bạn muốn cho Textthành phần gốc phản ứng . Trong trường hợp của bạn, bạn muốn fontFamily hoạt động trên mọi Textthành phần.

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

Gọi setCustomTexthàm và chuyển đạo cụ / kiểu của bạn vào hàm.

setCustomText(customTextProps);

Và sau đó tất cả các Textthành phần gốc phản ứng sẽ có fontFamily được khai báo của bạn cùng với bất kỳ đạo cụ / kiểu nào khác mà bạn cung cấp.

— Ajackster
nguồn
Phương pháp thành ngữ để sử dụng thành phần có vẻ như là một lựa chọn tốt hơn, mặc dù đây là một cách hack hay.
— Daniel Little
Khi thành phần Văn bản không hỗ trợ thay đổi phông chữ mặc định ra khỏi hộp, giải pháp này trở nên tốt hơn nhiều. Tôi thà thêm điều khiển toàn cục ở một nơi và sử dụng các thành phần gốc hơn là tạo thành phần trình bao bọc cho mọi chi tiết mà các ứng dụng gốc thực sự cung cấp.
— mienaikoe,
Tôi đã do dự giữa 2 giải pháp trên, thực sự tôi ghét cài đặt các plugin không chính thức vì bản thân react-native tiếp tục thay đổi, nhưng cuối cùng tôi chọn giải pháp này vì nó thực sự có thể giúp tôi tiết kiệm rất nhiều thời gian. Cảm ơn!
— Zhang Buzz
VẬY TÔI cần gọi <Text style={styles.text}>?? Nó không phải là giải pháp hoàn hảo như vậy body {font-family: 'Open Sans';} có giải pháp cập nhật nào không ??
— MD Ashik
1
Không, bạn không cần phải làm Text style={styles.text}>. Bạn chỉ cần khai báo các đạo cụ tùy chỉnh của mình ở đâu đó trong ứng dụng của bạn và nó sẽ được áp dụng cho tất cả các thành phần Văn bản của bạn. Nó rất giống vớibody {font-family: ....}
— Ajackster
31

Đối với React Native 0.56.0+, hãy kiểm tra xem defaultProps có được xác định trước không:

Text.defaultProps = Text.defaultProps || {}

Sau đó thêm: 

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

Thêm phần trên vào hàm tạo của tệp App.js (hoặc bất kỳ thành phần gốc nào bạn có).

Để ghi đè kiểu, bạn có thể tạo một đối tượng kiểu và trải nó, sau đó thêm kiểu bổ sung của bạn (ví dụ { ...baseStyle, fontSize: 16 }:)

— AJA
nguồn
4
Có thể defaultPropscâu trả lời không tồn tại khi tất cả các câu trả lời khác đã được viết ra nhưng đây dường như là cách để làm điều đó bây giờ.
— freeall
4
Thật không may, nó sẽ không làm việc nếu chúng ta ghi đè styleprop, chẳng hạn, để tinh chỉnh phong cách của riêng Textlinh kiện
— Amerzilla
Đúng nhưng bạn có thể làm việc xung quanh này, tạo ra các phong cách phổ biến như một đối tượng và khi đã bao giờ bạn muốn có một số phông chữ tùy chỉnh chỉ cần vượt qua để các thành phần một mảng có chứa đối tượng + yourNewStyleObject @Amerzilla
— AJA
1
Có một vấn đề ở đó. Sau đó, nếu ai đó xác định phần stylehỗ trợ trong thành phần Văn bản, phông chữ mặc định sẽ được thay thế.
— Broda Noel
2
đó là năm 2019 và nó hoạt động hoàn hảo. chỉ cần nhớ trong android, bạn không thể sử dụng "-" trong tên tệp. xác định tên tệp phông chữ của bạn giống như font_name.ttf.
— MRSafari
23

Bạn có thể ghi đè hành vi Văn bản bằng cách thêm hành vi này vào bất kỳ thành phần nào của mình bằng Văn bản:

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]
    });
};

Chỉnh sửa: kể từ khi React Native 0.56, Text.prototypekhông hoạt động nữa. Bạn cần loại bỏ .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]
    });
};
— Floris M
nguồn
4
Đó là một giải pháp tuyệt vời nhưng bạn phải thay đổi: [origin.props.style, {color: 'red', fontFamily: 'Arial'}] -> [{color: 'red', fontFamily: 'Arial'}, origin. props.style] Nếu không, bạn sẽ ghi đè lên phong cách tùy chỉnh setted trong thành phần
— Iaconis Simone
1
Làm việc tốt nhất. Text.prototype.render không hoạt động nữa, Text.render thì có!
— Kira
1
làm thế nào để tránh các biểu tượng kế thừa giống nhau?
— đám đông
1
Tôi đồng ý với @IaconisSimone Phương pháp tốt nhất để đặt fontFamily và đảm bảo không ghi đè các kiểu tùy chỉnh
— dczii
1
Đây là con đường để đi
— Witalo Benicio
15

Thêm vào

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

trong package.json sau đó chạyreact-native link

— Sanjib Suna
nguồn
14

Với React-Native 0.56, phương pháp thay đổi ở trên Text.prototype.renderkhông hoạt động nữa, vì vậy bạn phải sử dụng thành phần của riêng mình, có thể được thực hiện trong một dòng!

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>
...
— bobby
nguồn
@FancyJohn Nó bây giờ sẽ có móc và useRef. reactjs.org/docs/hooks-reference.html#useref
— Christopher Reid,
11

Thêm chức năng này vào Appthành phần gốc của bạn và sau đó chạy nó từ phương thức khởi tạo của bạn sau khi thêm phông chữ của bạn bằng cách sử dụng các hướng dẫn này. 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;
            }
        };
    }
}
— Rob
nguồn
Đây chính là thứ mà tôi đang tìm kiếm, không muốn cài thêm gì nữa.
— zevy_boy
Nếu App.js của tôi chủ yếu bao gồm const App = StackNavigator({...})và export default Appchính xác thì tôi sẽ đặt mã này ở đâu vì tôi không nghĩ rằng mình có thể sử dụng hàm tạo ở đây?
— kojow7
Tôi đã thêm câu hỏi của riêng mình ở đây: stackoverflow.com/questions/50081042/…
— kojow7
Tại sao hàm tạo trên componentDidMount?
— Dror Bar
2

Quá muộn với chủ đề này nhưng đây vẫn tiếp tục.

TLDR; Thêm khối sau vàoAppDelegate.m

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

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

Hướng dẫn toàn bộ quy trình.

Một số cách bạn có thể làm điều này ngoài việc sử dụng một plugin như react-native-global-propsvậy Tôi sẽ hướng dẫn bạn từng bước một.

Thêm phông chữ vào nền tảng.

Cách thêm phông chữ vào dự án IOS

Đầu tiên, hãy tạo một vị trí cho nội dung của chúng tôi. Hãy tạo thư mục sau tại thư mục gốc của chúng tôi.

``

ios/
static/
       fonts/

``

Bây giờ, hãy thêm NPM "React Native" trong package.json của chúng tôi

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

Giờ đây, chúng tôi có thể chạy "liên kết gốc phản ứng" để thêm nội dung vào ứng dụng gốc của mình.

Xác minh hoặc làm thủ công.

Điều đó sẽ thêm tên phông chữ của bạn vào các dự án .plist (đối với người dùng mã VS chạy code ios/*/Info.plistđể xác nhận)

Ở đây, hãy giả sử Verlaglà phông chữ bạn đã thêm, nó sẽ trông giống như sau:

     <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>

Bây giờ bạn đã ánh xạ chúng, bây giờ hãy đảm bảo rằng chúng thực sự ở đó và đang được tải (đây cũng là cách bạn thực hiện theo cách thủ công).

Đi tới "Build Phase" > "Copy Bundler Resource", Nếu nó không hoạt động, bạn sẽ thêm thủ công vào bên dưới chúng tại đây.

1_uuz0__3kx2vvguz37bhvya

Nhận tên phông chữ (được công nhận bởi XCode)

Trước tiên, hãy mở nhật ký XCode của bạn, như:

XXXX

Sau đó, bạn có thể thêm khối sau vào của bạn AppDelegate.mđể ghi tên của Phông chữ và Họ Phông chữ.

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


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

  ...
}

Sau khi chạy, bạn sẽ tìm thấy phông chữ của mình nếu được tải đúng cách, ở đây chúng tôi đã tìm thấy các phông chữ của chúng tôi trong các nhật ký như sau:

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

Vì vậy, bây giờ chúng tôi biết nó đã tải Verlaghọ và các phông chữ bên trong họ đó

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

Đây là những tên phân biệt chữ hoa chữ thường mà chúng ta có thể sử dụng trong họ phông chữ của mình, chúng ta có thể sử dụng trong ứng dụng gốc phản ứng của mình.

Got -'em bây giờ đặt phông chữ mặc định.

Sau đó, để đặt một phông chữ mặc định để thêm họ phông chữ của bạn vào AppDelegate.mvới dòng này

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

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

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

Làm xong.

— garrettmac
nguồn
Cách tiếp cận tốt nhất, nhưng không hoạt động, bất kỳ điều gì liên quan đến bản cập nhật las của RN 0.57?
— user2976753
2

Đặt trong package.json

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

Và liên kết liên kết gốc phản ứng

— puc12
nguồn
1

Điều đó phù hợp với tôi: Thêm phông chữ tùy chỉnh trong React Native

tải xuống phông chữ của bạn và đặt chúng trong thư mục tài sản / phông chữ, thêm dòng này vào package.json 

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

sau đó mở terminal và chạy lệnh này: react-native link

Bây giờ bạn đã tốt để đi. Để biết thêm bước chi tiết. truy cập liên kết ở trên được đề cập

— Khushboo Tahir
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.