JSX and styling

React Native views are written using JSX (JavaScript XML), an extension to the ECMAScript standard. JSX combines both logic and mark-up into the same file.

JSX is used to achieve separation of concerns, rather than separation of technologies. This means that instead of having separate files for mark-up, styles and behaviour of components, all that is combined into a single file for each separate component.

React Native includes a simplified implementation of CSS for styling objects. Styles are declared right inside the JSX file you’re styling, which enforces you to write modular styles for your modular components, instead of having a global namespace for styles like in CSS.

Styles can be written in three different ways: inline, as plain JavaScript objects or with Stylesheet.create. Both Eiseman (2016) and Holmes & Bray (2015) recommend Stylesheet.create as the best choice, which makes each style declaration immutable and guarantees styles will be loaded only once during the application’s lifecycle.

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