[React Native] Using the WebView component

最新推荐文章于 2025-09-04 18:55:33 发布

转载最新推荐文章于 2025-09-04 18:55:33 发布 · 53 阅读

文章标签：

#javascript #ViewUI

本文介绍如何在 React Native 应用中使用 WebView 组件来加载网页内容，并通过示例展示了如何将应用内的链接指向 Github 网页。

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;