反应原生选择器样式 - ANDROID

问题描述：

我试图添加一些样式来反应，当地选择器，如基础和设置的占位符，但无法这样做。反应原生选择器样式 - ANDROID

const styles = StyleSheet.create({ 
    picker: { 
    textDecorationLine: 'underline' 
    } 
}); 

<Picker 
    style={[styles.picker]}> 
    <Picker.Item label="Country" value="" /> 
    <Picker.Item label="United States" value="US" /> 
    <Picker.Item label="India" value="IN" /> 
</Picker>

如果我使用值=“”，那么就说明国家作为一个可选的值，这是我不想要的。
textDecorationLine无法将下划线样式设置为选取器。

基本上，我希望创造这样的事情，

这里，我可以设置占位符的颜色为好。

谢谢你。

答

拾取器和拾取器项目的样式是在Android上本机处理的。你需要为Android的SpinnerItem定义样式android/app/src/res/styles.xml请参阅：How to style the standard react-native android picker?

我试图测试下划线，但似乎找不到任何有效的东西。以下是几种解决方法Android spinner with underline appcompat

但是，我会简单地使用react native组件来获得优势。我会创建一个新组件，它包装React Native的Picker，并将选择器放入View中，并使用下划线样式，如果Picker的值未定义，则会呈现占位符。

是的，它是我可以实现的解决方法。此外，它似乎像'picker'不支持造型，我无法改变它的fontSize。有什么建议么？ –

要在xml中定义字体大小，请查看第二个答案：http://stackoverflow.com/questions/10409871/how-to-increase-spinner-item-font-size' 30sp'是重要的一点。但要小心，它似乎并不适用于所有版本（我没有确认或否认它适用于哪个版本，我认为它可能适用于大于4） –

我认为解决方案无法使用'react-native '，但是是的，你分享了一些有用的链接，我可以至少自定义选择器UI，感谢分享并因此接受你的答案。 –

答

这里的问题假设Picker具有TextInput的属性和样式，但它没有。这里有一个相关的问题：Have a placeholder for react native picker其中的评论概述了你需要渲染类似于占位符文本的东西。

为了实现类似于textDecorationLine的操作，您可以将borderBottomWidth样式应用于组件。

还有，记得绑定了selectedValue和onValueChange道具：

selectedValue={this.state.country} onValueChange={(country) => this.setState({country: country})}>

阵营原生不支持'borderBottomWidth '属性，看到这个，http://stackoverflow.com/questions/36444874/adding-border-only-to-the-one-side-of-the-text-component-in-react-native-ios –

也，有什么办法可以减少'Picker'的字体大小，因为按照每个反应文档，picker支持'style'，但不知何故它不起作用。 http://facebook.github.io/react-native/releases/0.23/docs/picker.html#picker –

答

这是最接近我可以在iOS上：https://snack.expo.io/r1L7DGb1Z

几点需要注意：

1）有itemStyle用于设置单个拾取器项目的特定样式的属性

2）为了取消箭头，您必须m手动模仿它。你可能想将其附加的功能与TouchableHighlight（未在上面的例子一样）

3）这看起来并不在Android类似，所以你可能需要添加额外的，特定于平台的造型。

感谢分享，但我忘了提及目前我正在寻找Android解决方案，因此更新了我的问题。 –

答

您需要修改您的活动主题如下：

<!-- Base application theme. --> 
<style name="AppTheme"> 
    <!-- Customize your theme here. --> 
    <item name="colorAccent">@color/colorAccent</item> 
    <item name="android:spinnerStyle">@style/Base.Widget.AppCompat.Spinner.Underlined</item> 
    ... 
</style>

的colorAccent控制下划线的颜色，并使用@style/Base.Widget.AppCompat.Spinner.Underline提供您Picker下划线。

您可以使用这种技术在React中几乎所有的android组件上设置样式。 android:editTextStyle，android:textViewStyle等

不幸的是，因为阵营选择器扩展Spinner，而不是AppCompatSpinner，造型会有点不同，如果你在运行API 21 <

反应原生选择器样式 - ANDROID

相关推荐