Uppercase Button in nativebase

问题

I have a button with face book icon

<Button iconLeft block > <Icon name='logo-facebook' /> <Text>Login with facebook</Text> </Button>

with text "Login with facebook" But it displays "LOGIN WITH FACEBOOK" .I am tried with capitalize={false} but no hope.Is there any way? NB version:2.2.1

回答1:

you are using Native Base Right ? maybe you can try this one.

you can change this code:

<Button iconLeft block > 
 <Icon name='logo-facebook' /> 
 <Text> {'Login with facebook'.toUpperCase()} </Text>
</Button>

to this :

<Button iconLeft block > 
 <Icon name='logo-facebook' /> 
 <Text uppercase={false}> {'Login with facebook'.toUpperCase()} </Text>
</Button>

just only using uppercase={false} in your <text> tag, hope it can help you :)

回答2:

Try this :

 text.capitalize-lowercase {text-transform: lowercase;}
text.capitalize-uppercase {text-transform: uppercase;}

<button iconleft block> <icon name='logo-facebook' /> <text class="capitalize-uppercase">Login with facebook</text> </button>
 <br/> <br/>
<button iconleft block> <icon name='logo-facebook' /> <text class="capitalize-lowercase">Login with facebook</text> </button>

回答3:

I think text transform currently not support by react native style.So you can try something like this

<Button iconLeft block > 
 <Icon name='logo-facebook' /> 
 <Text> {'Login with facebook'.toUpperCase()} </Text>
</Button>

来源：https://stackoverflow.com/questions/45048348/uppercase-button-in-nativebase

标签

javascript

react-native

native-base