反應原生選擇器樣式 - 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無法將下劃線樣式設置爲選取器。

基本上，我希望創造這樣的事情，

這裏，我可以設置佔位符的顏色爲好。

謝謝你。

來源

2017-04-21 Mohit Pandey

拾取器和拾取器項目的樣式是在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的值未定義，則會呈現佔位符。

來源

2017-05-03 17:39:52

是的，它是我可以實現的解決方法。此外，它似乎像'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})}>

來源

2017-04-28 18:05:33 jaws

陣營原生不支持'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 –

-1

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

幾點需要注意：

1）有itemStyle用於設置單個拾取器項目的特定樣式的屬性

2）爲了取消箭頭，您必須m手動模仿它。你可能想將其附加的功能與TouchableHighlight（未在上面的例子一樣）

3）這看起來並不在Android類似，所以你可能需要添加額外的，特定於平臺的造型。

來源

2017-04-28 19:26:05 zvona

感謝分享，但我忘了提及目前我正在尋找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 <

來源

2017-09-25 21:10:55 chessdork

反應原生選擇器樣式 - ANDROID

回答

相關問題