Fala galera, beleza? Esse blog aqui ja ta parado a muito tempo, se você quer mais conteúdo tech basta ir para https://tuliocalil.com.br/ .
Diversos componentes do React Native tem comportamentos e estilizações diferentes entre o Ios e Android, e esta é a resposta mais curta. Se formos até a documentação do Picker vamos perceber que algumas propriedades são validas apenas para um OS, e no itemStyle podemos ver que é uma prop exclusiva do iOS (RN 0.61 <):
Mas por que ?
Nativamente, no Android, a estilização do Picker acontece pelo arquivo styles.xml, declarando estilos para o Spinner, SpinnerItem e SpinnerDropDownItem e não diretamente no Widget, como acontece com outros componentes, e por isso o React Native não é capaz de modificar essas props da forma "tradicional".
Logo, teremos que alterar este arquivo diretamente, então vamos lá!
Navegue até: <seu projeto>/android/app/src/main/res/values/styles.xml, você verá algo similar a isto:
Caso não tenha familiaridade com os estilos nativos do Android, pode consultar a documentação oficial.
Aqui vou dar um exemplo de estilo, para modificar as propriedades do item selecionado:
(lembrando que, o name passado anteriormente nos styles serve como um id, onde vamos referenciar ele logo abaixo, quando fazemos @styles/<o name definido nos styles>)
Ficando assim:
E o resultado:
Caso não tenha familiaridade com os estilos nativos do Android, pode consultar a documentação oficial.
Aqui vou dar um exemplo de estilo, para modificar as propriedades do item selecionado:
<style name="SpinnerItem" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:textSize">13dp</item>
<item name="android:android:paddingLeft">5dp</item>
</style>
Para alterar as propriedades do Drop Down que é aberto quando clica:<item name="android:textSize">13dp</item>
<item name="android:android:paddingLeft">5dp</item>
</style>
<style name="SpinnerDropDownItem" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:textSize">18dp</item>
<item name="android:fontFamily">sans-serif-light</item>
<item name="android:gravity">center</item>
</style>
E para que os estilos sejam aplicados ao Spinner, precisamos vincular ao tema, então dentro do estilo "AppTheme", adicione:<item name="android:textSize">18dp</item>
<item name="android:fontFamily">sans-serif-light</item>
<item name="android:gravity">center</item>
</style>
(lembrando que, o name passado anteriormente nos styles serve como um id, onde vamos referenciar ele logo abaixo, quando fazemos @styles/<o name definido nos styles>)
<item name="android:spinnerItemStyle">@style/SpinnerItem</item>
<item name="android:spinnerDropDownItemStyle">@style/SpinnerDropDownItem</item>
<item name="android:spinnerDropDownItemStyle">@style/SpinnerDropDownItem</item>
Ficando assim:
E o resultado:
Então é isso, componente estilizado!
Boa sorte e até a próxima!





Comentários
Postar um comentário