Using
Styles, Button, Image, Flex in React Native
Styles using in React Native
When
never we use some app we can see a background colors, styles, Text. That’s only
we going to see how to add background colors, text and styles in react native.
· With React Native, you style your application using JavaScript.
All of the core components accept a prop named style
.
· We have to import StyleSheet in react native.
· Import {StyleSheet} from ‘react-native’
· Cleaner to use StyleSheet.create
to define
several styles in one place. Here's an example:
Output
for our code:
Here the output for the given code we can see the background color that I have given in StyleSheet
Text:
In the above output code I have added text in the app and I style that’s text using css.
Displaying
basic button:
Button provides a basic button component that is rendered nicely
on all platforms.
It is simple code for creating button.
In this button I have given Alert message when we press the button it will show the message like this
Touchables:
· TouchableHighlight
· TouchableOpacity
· TouchableNativeFeedback
TouchableOpacity:
TouchableHighlight:
TouchableNativeFeedback:
TouchableNativeFeedback
is used only in Android.
Image:
In react native how to add image in our creating app.We have to insert a image into the our app folder and have to create a new file folder to insert the image
In the asstes folder I added image.
Next import the image source into the react native
Layout
with Flexbox:
Flex
will define how your items are going to “fill” over the available space along your main
axis. Space will be divided according to each element's flex property.
· The color I have given
blue, gray, and yellow views are all children
· The blue view uses flex: 2
, the gray
view uses flex: 1
, and the yellow
view uses flex: 2
.
· 2+1+2 = 5, the blue view will get 2/5
of the
space, the gray 1/5
of the
space, and the yellow 2/5
of the space.
Example output is
Comments