反应本地选择样式- 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>- 如果我使用value=""，那么它将国家显示为一个可选择的值，这是我不想要的。
textDecorationLine无法将下划线样式设置为选择器。
基本上，我是想创造出这样的东西，
在哪里，我也可以设置占位符的颜色。
非常感谢。
回答 6
Stack Overflow用户
发布于 2017-05-03 17:39:52
采摘器和选择项的样式是在Android上本地处理的。您需要为Android的SpinnerItem在android/app/src/res/styles.xml中定义样式参见：How to style the standard react-native android picker?
我试着测试下划线，但似乎找不到起作用的东西。下面是几个解决方案-- Android spinner with underline appcompat
然而，我只想简单地使用react的本地组件来实现我们的优势。我会创建一个新的组件，它封装了本机的选择器，并将选择器放在一个带有下划线样式的视图中，如果Picker的值未定义，就会呈现占位符。
Stack Overflow用户
发布于 2020-01-20 04:53:39
您也可以使用它来使您的反应更具吸引力--原生picker.You可以向您的视图中添加样式，这样它就可以轻松地对您的选择程序进行更改。
import React, { Component } from 'react';
import { View, Picker } from 'react-native';
export default class DropdownDemo extends Component{
state = { user: '' }
updateUser = (user) => {
this.setState({ user: user })
}
render(){
return(
<View
style={{
width: 300,
marginTop: 15,
marginLeft:20,
marginRight:20,
borderColor: 'black',
borderBottomWidth:1,
borderRadius: 10,
alignSelf: 'center'
}}>
<Picker
selectedValue={this.state.user}
onValueChange={this.updateUser}
>
<Picker.Item label="Male" value="Male" />
<Picker.Item label="Female" value="Female" />
<Picker.Item label="Other" value="Other" />
</Picker>
</View>
);
}
}Stack Overflow用户
发布于 2017-09-25 21:10:55
您需要修改您的活动主题如下：
<!-- 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上提供下划线。
您可以使用这种技术来设置几乎任何android组件的样式。android:editTextStyle、android:textViewStyle等。
不幸的是，由于React扩展了Spinner而不是AppCompatSpinner，所以如果在API < 21上运行，样式就会有所不同。
https://stackoverflow.com/questions/43546763
复制相似问题
腾讯云开发者
