Upload
visual-engineering
View
248
Download
0
Embed Size (px)
Citation preview
React NativeA FRAMEWORK FOR BUILDING NATIVE APPS USING REACT
React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React.
Focuses on developer efficiency across all platforms.
Learn once, write everywhere.
What is React Native?
React Native uses the actual native components of each platform (currently iOS and Android).
Native Components
Androidrender() { return ( <DrawerLayoutAndroid renderNavigationView={ () => <Text> React Native </Text> }> <ProgressBarAndroid /> </DrawerLayoutAndroid> );}
iOSrender() { return ( <TabBarIOS> <TabBarIOS.Item title="React Native" selected={true}> <NavigatorIOS initialRoute={{ title: 'React Native' }} /> </TabBarIOS.Item> </TabBarIOS> );}
All operations between the javascript code and the native code are performed asynchronously
- Decode images- Save to disk- Measure and compute Layouts- …
All this results in naturally fluid and responsive apps.
Asynchronous execution
Communication with native app is fully serializable, so we can leverage the usual debugging tools
Debugging
The debug version of the code launches a node server responsible to serve the code changes to the app.When code changes, app can reload automatically.
Live Reload/Hot reload
React Native implements a subset of flexbox components and syntax -Not .css!
var styles = StyleSheet.create({ row: { flexDirection: 'row', margin: 40 }, image: { width: 40, height: 40, marginRight: 10 }, text: { flex: 1, justifyContent: 'center'}, title: { fontSize: 11, fontWeight: 'bold' }, subtitle: { fontSize: 10 },});
Flexbox and styling
React Native only focuses on how the view code is writtenYou can leverage all the JS world for any -not visual- library.React Native leverages from the open source community.
When in trouble, just remember: $> npm install --save
It’s just a JS framework!
Useful Native Components:
Native Components
CommonView, Text, TextInput, Image,TouchableHighlight,ScrollView,MapView
iOSTabBarIOSDatePickerIOSProgressViewIOS
AndroidDrawerLayoutAndroidViewPagerAndroidToolbarAndroid
Two worldsSlider-SliderIOS,Picker-PickerIOS,Navigator-NavigatorIOS
Useful Native APIs:
Alert-AlertIOSAppRegistry,StyleSheet,CameraRoll,ToastAndroid,…Para todo lo demás… GitHub + ReactParts
Native APIs
Not included? Make your own!There is a lot already -use with caution!
Native modules
- Set up your environment development carefully- Develop iOS & Android concurrently ASAP- Android first: less components over there- Use linter. It’ll avoid many problems- Use Redux. No hace falta decir nada más
Some Thoughts on Poduction Development
Thanks for your time!
Give your questions on the comments section