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。但是选择器项目的字体不会更改。

Answer 1

正如罗比所说，您可以使用itemStyle道具。

不过，itemStyle是仅由 iOS平台支持的高级property，如React Native docs here所示。因此，对于样式选择器项目，例如，更改<fontFamily，颜色等只能使用原生Android样式（对于 now ）。然后它将在两个平台上都适用。

请牢记这一点，您将在资源中添加一个新的<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 solved issue。

Answer 2

该代码应该可以工作，但是我对您提供的字体名称感到好奇。如果您将Google字体用作链接资产，则除非您自己重命名，否则应为Roboto-Thin。仔细检查链接到您的项目的字体名称是否正确。

要注意的另一件事是，Android默认字体是 Roboto，因此您可以通过fontWeight属性获得它的精简版本：

itemStyle={{ fontWeight: '100' }} // <-- 100 is thin, 300 is light, 400 would be regular

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

2 个答案: