Building an app in 5 minutes

  1. Requirement follow Getting Started
  2. Generate a new React Native project
    react-native init testRn
  3. Build & run project
    react-native run-ios
    or open testRn/ios/testRn.xcodeproj and build with XCode's play button
or if the app already builded, start the webserver
npm start
//or
react-native start

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