react-native-navigation的迁移库

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. ---
  2. id: style-fonts
  3. title: Changing fonts
  4. sidebar_label: Changing fonts
  5. ---
  6. Before you begin using your own fonts, you'll first need to add them to the app project.
  7. * **Android** - add the `.ttf` or `.otf` files to `src/main/assets/fonts/`
  8. * **iOS** - follow this [guide](https://medium.com/react-native-training/react-native-custom-fonts-ccc9aacf9e5e)
  9. Once we've added the font files to our project, we can star using them in options.
  10. :::note
  11. When declaring fonts in options, use only the file name without the file type suffix.
  12. :::
  13. ## BottomTab font
  14. ```js
  15. options: {
  16. bottomTab: {
  17. fontFamily: 'helvetica'
  18. }
  19. }
  20. ```
  21. ## Button font
  22. ```js
  23. options: {
  24. rightButtons: [
  25. {
  26. id: 'SAVE_BUTTON',
  27. text: 'Save',
  28. fontFamily: 'helvetica'
  29. }
  30. ],
  31. leftButtons: [
  32. {
  33. id: 'CANCEL_BUTTON',
  34. text: 'Cancel',
  35. fontFamily: 'helvetica'
  36. }
  37. ]
  38. }
  39. ```
  40. ## Title font
  41. ```js
  42. options: {
  43. topBar: {
  44. title: {
  45. fontFamily: 'helvetica'
  46. }
  47. }
  48. }
  49. ```
  50. ## Subtitle font
  51. ```js
  52. options: {
  53. topBar: {
  54. subtitle: {
  55. fontFamily: 'helvetica'
  56. }
  57. }
  58. }
  59. ```
  60. ## Back button
  61. In iOS the back button will display the title of the previous screen. Use the `backButton` option to modify its font family.
  62. ```js
  63. options: {
  64. topBar: {
  65. backButton: {
  66. fontFamily: 'helvetica'
  67. }
  68. }
  69. }
  70. ```