react-native - 更改 Picker.Item 字体系列 React native？

Question

<Picker
  // selectedValue={this.state.language}
  selectedValue="USD"
  style={{ height: 50, width: 100, marginRight: 10, justifyContent: 'flex-start'  }}
  itemStyle={{ fontFamily: 'Roboto_thin' }}
  // onValueChange={(itemValue, itemIndex) =>
  //   this.setState({ language: itemValue })
  // }
  >
  <Picker.Item label="USD" value="java" />
  <Picker.Item label="ETB" value="js" />
</Picker>

我想更改选择器项目的字体，并添加一个带有 fontFamily 值的属性 itemStyle。但是选择器项目的字体没有改变。

标签： react-native

Answer 1

正如罗比提到的，你可以使用itemStyle道具。

但是，这是一个仅由iOS 平台itemStyle支持的高级功能，您可以在此处的 React Native 文档中看到。因此，对于 Picker 项目的样式，例如更改、颜色等，目前只能使用Android 原生样式来完成。然后它将适用于两个平台。propertyfontFamily

考虑到这一点，您将在文件中添加一个<style>带有资源的新标签style.xml，通常在路径中本地化：android/app/src/main/res/values/styles.xml. 并将其设置AppTheme为与添加的样式一起计数，例如：

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
     <item name="android:spinnerItemStyle">@style/SpinnerItem</item>
     <item name="android:spinnerDropDownItemStyle">@style/SpinnerDropDownItem</item>
    </style>

    <!-- Item selected font. -->
    <style name="SpinnerItem" parent="Theme.AppCompat.Light.NoActionBar">
     <item name="android:fontFamily">casual</item>
    </style>

    <!-- Dropdown options font. -->
    <style name="SpinnerDropDownItem" parent="Theme.AppCompat.Light.NoActionBar">
      <item name="android:fontFamily">casual</item>
      <item name="android:padding">8dp</item>
    </style>
<resources>

有用的链接：

• React Native Picker Android git 解决了问题。