React Native Views, JSX use and Styling :
This time we will cover the basic things needed to create views and style components for mobile surfacely. Later on when we will start to develop real functional app, then we can have deep knowledge about views. Before that have some overview and basic knowledge about Views and styling in React Native.
Rendering the view is similar to React and we will feel easy if we are familiar to ReactJS and JSX.
React component
render: function(){
return <div>hi ! </div>
}
React Native component
render: function(){
return <View>hi!</View>
}
When we write view in React , we use common HTML tags like <div>,<p>,<span>,etc. With React Native, all of these elements are replaced by platform specific React Components(as given below).
React ReactNative
<div> <View>
<span> <Text>
<li><ul> <ListView>
<img> <Image>
There are other more components which we will discuss later in each use.
On iOS, for instance, <View> component renders to a UIView, while on Andrioid it renders to a View.As components may vary from platform to platform, how we structure our React components becomes even more important when working in React Native.In React for web, we often have a mix of React components : some manage logic and their components, while other components render raw markup. If we want to mantain code and reuse it in React Native, it is somehow critical.
However the components that render the view should be written sepreately like view.ios.js and view.android.js and the component that encapsulates the related logic can be reused. View component can be swapped out based on the platform.
Using JSX:
Just like in React, we use JSX(combining markup and JS into a single file) in React Native. JSX prioritizes the separation of concerns over the separation of technologies. In React Native, this is even more strictly enforced.
If you have never seen JSX before, do not worry , it is pretty simple and easy.
Let take a look in below example:
Pure Javascript component:
var HelloMessage= React.createClass
({
displayName: "HelloMessage",
render: function render()
{
return React.createElement
(
"div",null,"Hello",this.props.name
);
}
});
React.render(React.createElement(HelloMessage,{name:"Kais"), mountNode);
JSX example:
var HelloMessage = React.createClass({
render: function(){
return <div>Hello {this.props.name}</div>;
}
});
React.render(<HelloMessage name="Kais"/>,mountNode);
Both will render following HTML on page:
<div>Hello Kais</div>
Styling:
React Native insists on the use of inline styles, which exits as JS objects.
Syntax looks like this:
//Define a style...
var style ={
backgroundColor: 'white',
fontSize: '16px'
};
//...and then apply it.
var tv=(
<Text style={style}>
A styled Text
</Text>);
** We will talk about styling more details in upcoming Posts. **
