如何修改React Native Paper中Button与TextInput的字体族？

一、修改 Button 的字体族 #

React Native Paper 的 Button 组件没有直接暴露字体族属性，但可以通过两种方式实现：

1. 通过 contentStyle 直接设置
   利用 Button 的 contentStyle 属性，给内部文本元素指定字体族：

   <Button
     style={{
       width: "90%",
       height: 46,
       justifyContent: "center",
       borderRadius: 8,
     }}
     textColor="#FFFFFF"
     buttonColor="#797c83"
     contentStyle={{ fontFamily: "你的字体名称" }} // 此处添加字体族配置
   >
     按钮文本
   </Button>
   

2. 全局主题配置（推荐批量修改）
   如果需要所有 Button 统一使用自定义字体，可在应用入口处配置 React Native Paper 的主题：

   import { Provider as PaperProvider } from 'react-native-paper';
   
   const theme = {
     fonts: {
       medium: {
         fontFamily: '你的字体名称', // Button 默认使用 medium 字重的字体配置
       },
     },
   };
   
   export default function App() {
     return (
       <PaperProvider theme={theme}>
         {/* 你的应用内容 */}
       </PaperProvider>
     );
   }
   

二、修改 TextInput 的字体族 #

TextInput 的输入文本和占位符可通过以下方式设置字体：

1. 设置输入文本的字体族
   直接在 style 属性中添加 fontFamily，输入的文字会自动应用该字体：

   <TextInput
     placeholder="Enter email"
     placeholderTextColor="#758195"
     value={email}
     onChangeText={(email) => setEmail(email)}
     underlineColor="transparent"
     activeUnderlineColor="#758195"
     textColor="#FFF"
     style={{
       backgroundColor: "#041e29",
       borderWidth: 1,
       borderColor: "#4A6171",
       width: "90%",
       fontFamily: "你的字体名称" // 此处添加字体族配置
     }}
     left={<TextInput.Icon icon="email" />}
   />
   

2. 单独设置占位符的字体族
   如果需要占位符使用与输入文本不同的字体，可通过 placeholderStyle 属性单独配置：

   <TextInput
     // 其他属性保持不变
     placeholderStyle={{ fontFamily: "占位符专属字体名称" }}
   />
   

3. 全局主题统一配置
   若要让所有 TextInput 统一字体，同样可以通过主题配置实现：

   const theme = {
     fonts: {
       regular: {
         fontFamily: '你的字体名称', // TextInput 默认使用 regular 字重的字体配置
       },
     },
   };
   

注意：确保你已经在 React Native 项目中正确引入了自定义字体（比如通过 react-native-asset 工具或手动配置 react-native.config.js），否则字体族设置不会生效。

内容的提问来源于stack exchange，提问作者Abhi