diff --git a/website/src/react-native/_index.js b/website/src/react-native/_index.js index b9c8a41ca..5b84e7f1e 100644 --- a/website/src/react-native/_index.js +++ b/website/src/react-native/_index.js @@ -7,6 +7,7 @@ * of patent rights can be found in the PATENTS file in the same directory. */ +var Prism = require('Prism'); var React = require('React'); var Site = require('Site'); @@ -29,7 +30,82 @@ var index = React.createClass({ Learn more about React Native -

+ +

Native iOS Components

+

With React Native, you can use the platform components such as iOS UITabBar and UINavigationController.

+ +{`var React = require('react-native'); +var { TabBarIOS, NavigatorIOS } = React; +module.exports = React.createClass({ + render: function() { + return ( + + + + + + ); + }, +});`} + + +

Async

+ +

Decoding images off of the main thread... Asynchronous bridge, Chrome Dev Tools...

+ +

Touch Handling

+

iOS has a very powerful system called Responder to handle touches which the web lacks. React Native implements iOS responder system and provides high level components such as TouchableHighlight that work well right off the bat.

+ + +{`var React = require('react-native'); +var { ScrollView, TouchableHighlight, Text } = React; +module.exports = React.createClass({ + render: function() { + return ( + + + Proper Touch Handling + + + ); + }, +});`} + + +

Flexbox

+

Laying out views should be easy

+ + +{`var React = require('react-native'); +var { Image, StyleSheet, Text, View } = React; +module.exports = React.createClass({ + render: function() { + return ( + + + + React Native + Build high quality mobile apps using React + + + ); + }, +}); +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 }, +});`} + + +

Polyfills

+

React Native attempts to innovate on the view layer, for the rest, it polyfills web standards. You can use npm to install JavaScript dependencies, XMLHttpRequest, requestAnimationFrame, navigator.geolocation...

+ );