[React Native] Using the WebView component
We can access web pages in our React Native application using the WebView component. We will connect the links in our repository component to their Github web page when a user click on them.
Navigate to WebView component:
openPage(url){ this.props.navigator.push({ component: Web, title: 'Web View', passProps: {url} }); }
Web View Compnent:
import React from 'react'; import { View, WebView, StyleSheet } from 'react-native'; var styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F6F6EF', flexDirection: 'column', }, }); class Web extends React.Component{ render(){ return ( <View style={styles.container}> <WebView source={{uri: this.props.url}} /> </View> ); } } Web.propTypes = { url: React.PropTypes.string.isRequired }; module.exports = Web;