[React Native] Using the WebView component

时间:2024-12-20 00:07:50

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: ,
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;