Components

Like React for the Web, React Native uses a component-based architecture and all code lives inside the components.

Components are reusable function-like objects that are used to describe the native components that are displayed. React Native components always have a render method, some properties and a state.

React Native offers both cross-platform and platform-specific components. For example, the iOS and Android applications can both use a React component named , which gets rendered as UIView on iOS and as a View on Android. Some components are only available for a specific platform, for example the renders the standard date picking component for iOS, while on Android has to be used.

 React Native has variety of components similar to basic HTML components that are used when developing with React for the Web or with pure HTML for the web in general. Most common HTML components, their use cases and React Native counterparts are listed in.

Purpose  HTML Component  React Native Component
Dividing content <div> <View>
Displaying Image  <img> <Image>
Paragraph of text <span>,<p> <Text>
List, unordered, ordered <li>, <ul>,<ol> <ListView>
Control Elements <a>,<button> <TouchableHighlight>


 HTML components and their corresponding React Native components
Components are created simply by creating a class that extends the React.Component class, and has a render() method that returns JSX.
Creating a React Native component:
class HelloWorldComponent extends React.Component {
    render(){
   return(
   <View>
      <Text> Hello World </Text>
    <View>
   );
}
}

Comments

Post a Comment

Popular posts from this blog

Size & Dimensions & onLayout

Image
1.window size let winSize = Dimensions.get( 'window' ); console .log(winSize); class Size extends Component { render() { return ( < View style = {styles.container} > < View style = {styles.block} /> < Text style = {styles.text} > some text </ Text > </ View > ); } } const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'flex-start' }, block: { height: 100, width: winSize.width, backgroundColor: 'red' }, text: { color: '#ffffff', fontSize: 40/winSize.scale, backgroundColor: 'blue' } }); 2. onLayout class Size extends Component { handleTextLayout(evt){ console .log(evt.nativeEvent.layout); } render() { return ( < View style = {styles.container} > < View style = {styles.block} /> < Text style = {styles.text} onLayout = {this.handle
Read more

Data - Networking - Fetch

Image
 Fetch 1.apply  redux-thunk  middleware import { applyMiddleware, createStore, compose } from 'redux' ; import thunk from 'redux-thunk' ; import createLogger from 'redux-logger' ; import reducers from '../reducers' ; var middlewares = compose(applyMiddleware(thunk), autoRehydrate()); export default function configureStore ( ) { const store = createStore(reducers, undefined , middlewares); return store; } 2.start & end action types //todo action types export const START_FETCH_ALL_TODOS = 'START_FETCH_ALL_TODOS' ; export const FETCH_ALL_TODOS = 'FETCH_ALL_TODOS' ; 3.fetch flow import * as types from '../constants/ActionTypes' ; import * as APIs from '../constants/ServerAPIs' ; function shouldFetchAllTodos ( state ) { const data = state.todos; if (data && data.isFetchingAllTodos) { return false } return true ; } export function fetchAllTodos ( ) {
Read more

Absolute & Relative

Image
1.absolute class Position extends Component { render() { return ( < View style = {styles.container} > < View style = {styles.box1} > < Text style = {styles.text} > 1 </ Text > </ View > < View style = {styles.box2} > < Text style = {styles.text} > 2 </ Text > </ View > < View style = {styles.box3} > < Text style = {styles.text} > 3 </ Text > </ View > </ View > ); } } const styles = StyleSheet.create({ container: { flex: 1 }, box1: { position: 'absolute' , top: 40 , left: 40 , width: 100 , height: 100 , backgroundColor: 'red' }, box2: { position: 'absolute' , top: 80 , left: 80 , width: 100 , height: 100 , backgroundColor: 'blue' }, box3: { position: 'absolute' ,
Read more