write once, run anywherelearn once, write anywhere
React Native | Hybrid |
---|---|
Shared and platform exclusive code | All code shared |
Javascript + JSX | Javascript + HTML + CSS |
Live and hot reload | Live and hot reload |
No WebView | WebView |
Native performance | Browser performance |
Relatively new | Lot's of mature plugins |
Not at all!
View | The most fundamental component for building a UI. |
Text | A component for displaying text. |
Image | A component for displaying images. |
TextInput | A component for inputting text into the app via a keyboard. |
ScrollView | Provides a scrolling container that can host multiple components and views. |
Button | A basic button component for handling touches that should render nicely on any platform. |
Picker | Renders the native picker component on iOS and Android. |
Slider | A component used to select a single value from a range of values. |
Switch | Renders a boolean input. |
FlatList | A component for rendering performant scrollable lists. |
SectionList | Like FlatList, but for sectioned lists. |
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { AppRegistry, Text, TouchableOpacity } from 'react-native'
import { Metrics, Colors, Fonts } from '../Themes'
const styles = {
text: {
...Fonts.style.h5,
color: Colors.snow,
marginVertical: Metrics.baseMargin
}
}
export class Button extends Component {
static propTypes = {
text: PropTypes.string,
onPress: PropTypes.func
}
render () {
return (
<TouchableOpacity onPress={this.props.onPress}>
<Text style={styles.text}>{this.props.text}</Text>
</TouchableOpacity>
)
}
}
AppRegistry.registerComponent('ButtonApp', () => Button)
Currently suggested solution is to use react-community/react-navigation
import React from 'react';
import {
AppRegistry,
Text,
} from 'react-native';
import { StackNavigator } from 'react-navigation';
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
return <Text>Hello, Navigation!</Text>;
}
}
const SimpleApp = StackNavigator({
Home: { screen: HomeScreen },
});
AppRegistry.registerComponent('SimpleApp', () => SimpleApp);
Android
iOS
class ChatScreen extends React.Component {
static navigationOptions = {
title: 'Chat with Lucy',
};
render() {
return (
<View>
<Text>Chat with Lucy</Text>
</View>
);
}
}
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
const { navigate } = this.props.navigation;
return (
<View>
<Text>Hello, Chat App!</Text>
<Button
onPress={() => navigate('Chat')}
title="Chat with Lucy"
/>
</View>
);
}
}
const SimpleApp = StackNavigator({
Home: { screen: HomeScreen },
Chat: { screen: ChatScreen },
});
Android
iOS
import renderer from 'react-test-renderer';
test('Link renders correctly', () => {
const tree = renderer.create(
<Link page="http://www.facebook.com">
Facebook
</Link>
).toJSON();
expect(tree).toMatchSnapshot();
});
exports[`Link renders correctly 1`] = `
<a
className="normal"
href="http://www.facebook.com"
onMouseEnter={[Function bound _onMouseEnter]}
onMouseLeave={[Function bound _onMouseLeave]}>
Facebook
</a>
`;
Ignite CLI
$ npm install -g ignite-cli
$ ignite new PizzaApp
$ cd PizzaApp
$ ignite add maps
$ ignite add vector-icons
$ ignite generate screen PizzaLocationList
$ ignite generate component PizzaLocation
$ ignite generate map StoreLocator
$ ignite add i18n
$ react-native run-ios
$ react-native run-android