[React Native] Using the WebView component

最新推荐文章于 2025-09-10 19:44:49 发布

weixin_30585437

最新推荐文章于 2025-09-10 19:44:49 发布

阅读量43

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Answer1215/p/5731336.html

本文介绍如何在React Native应用中使用WebView组件加载外部网页。通过示例代码展示了如何实现链接点击后在WebView中打开对应页面的功能。

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;