ReactNative-综合案例(03)

最近几天学了几个ReactNative组件,总觉得单纯的学几个组件进步慢,所以我打算做一些综合性的小案例,练习下实战,我从网上找到一个小案例 ,感觉挺好,也学习了很多,代码内容可能不太一样,主要区别是:我把RN官方不推荐或者已经放弃了的组件进行了替换,如果有需要的可以互相参考下

接着上篇案例开始写,这篇文章将会讲解如何怎样利用WebView加载HTML文件。

WYNewsDetail.js文件写如下代码:

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    WebView
} from 'react-native';

import Request from '../Utils/WYRequest';

export default class WYNewsDetail extends Component {
  static navigationOptions = ({ navigation }) => ({
    title: navigation.state.params.title,
  });

  constructor(props){
    super(props);

    this.state = {
      docid:'',
    };
  }

  componentDidMount() {
    const {params} = this.props.navigation.state;

    this.setState({
      docid: params.docid,
      html: '',
    });

    var url_api = 'http://c.m.163.com/nc/article/' + params.docid + '/full.html';
    Request.get(url_api, (responseData) => {

      // 取出数据
      var allData = responseData[this.state.docid];

      var body = allData['body'];
      // 取出图片
      var img = allData['img'];
      for (var i = 0; i < img.length; i++) {
        var item = img[i];
        var ref = item.ref;
        var src = item.src;
        var newImg = '<img src="'+ src +'" width="100%">';
        body = body.replace(ref, newImg);

        console.log('====================================');
        console.log(ref, src);
        console.log('====================================');
      }

      // 更新UI
      this.setState({
        html: body,
      });
    }, (error) => {
      alert(error);
    });
  }

  render() {
    return (
      <WebView
        automaticallyAdjustContentInsets={true}
        // source=  加载网页
        source=
        javaScriptEnabled={true}
        domStorageEnabled={true}
        startInLoadingState={true}
      />
    );
  }
}

const styles = StyleSheet.create({
  background: {
    backgroundColor: 'red',
    flex: 1,
    justifyContent: 'center',
    alignItems:'center'
  },

  textStyle: {
    fontSize:30,
  }
});

主要知识点:

  • 界面传值
static navigationOptions = ({ navigation }) => ({
    title: navigation.state.params.title,
  });
  
componentDidMount() {
    const {params} = this.props.navigation.state;

    this.setState({
      docid: params.docid,
      html: '',
    });

还有一个bug,就是当界面跳转的时候,左上角返回按钮和文字依旧是系统的蓝色,如何修改颜色,就用到了自定义功能了

const StackOptions = ({navigation}) => {
    console.log(navigation);
    let {state,goBack} = navigation;

    // 用来判断是否隐藏或显示header
    const visible= state.params.isVisible;
    let header;
    if (visible === true){
        header = null;
    }
    const headerStyle = {backgroundColor:'#4ECBFC'};
    const headerTitle = state.params.title;
    const headerTitleStyle = {fontSize:FONT_SIZE(20),color:'white',fontWeight:'500'}
    const headerBackTitle = false;
    const headerLeft = (
        <Button
            isCustom={true}
            customView={
                            <Icon
                                name='ios-arrow-back'
                                size={30}
                                color='white'
                                style=
                            />
                        }
            onPress={()=>{goBack()}}
        />
    );
    return {headerStyle,headerTitle,headerTitleStyle,headerBackTitle,headerLeft,header}
};

通过下面的方式调用:

const MyApp = StackNavigator({
    MyTab: {
        screen: MyTab,
    },
    Detail: {
        screen: Detail,
        navigationOptions: ({navigation}) => StackOptions({navigation})
    },
)};

至此第一个小案例就做完了

效果图

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏finleyMa

使用FlatList构建列表

接着上一篇 使用react-native-tab-navigator切换页面 当前首页页面内容是空的,只有一个背景色。下面我们来添加些内容。 这里使用 Fl...

46630
来自专栏自动化测试实战

Flask第36篇——模板项目实战(二)

前面我们利用宏将首页代码进行了第一次优化。如果我们现在还有其他页面,试想一下,首页上面的搜索框

22230
来自专栏前端人人

React第三方组件2(状态管理之Refast的使用②异步修改state)

本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件2(状态管理之Refast的使用①...

28130
来自专栏前端下午茶

Vue项目预渲染机制引入实践

周末想顺便把已经做好静态页面的webApp项目做一下SEO优化,由于不想写蹩脚的SSR代码,所以准备采用预渲染,本来想着网上有这么多预渲染的文章,随便找个来跟着...

73820
来自专栏我和未来有约会

Silverlight控件 - Carrousel

Silverlight控件 - Carrousel 简介: Carrousel是一个布局控件,可对其内部的子控件排出像《旋转木马》一样的效果。 项目地...

35660
来自专栏小古哥的博客园

初级React入门

一、引入Reactjs 方法一:直接下载相关js文件引入网页,其中react.js 是 React 的核心库,react-dom.js 是提供与 DOM 相关的...

32470
来自专栏CRPER折腾记

React 折腾记 - (2) 实现路由动效过渡,并解决过程中奇奇怪怪的问题

注意: 这里的样式用的style-components来写的,感兴趣的可以自行了解下

14910
来自专栏前端人人

React第三方组件1(路由管理之Router的使用⑤按需加载-下)

本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件1(路由管理之Router的使用①...

30060
来自专栏Core Net

微信小程序:动画(Animation)

官方文档是这样说的:①创建一个动画实例 animation。②调用实例的方法来描述动画。③最后通过动画实例的 export 方法导出动画数据传递给组件的 ani...

2.9K10
来自专栏iOS开发日记

iOS开发系列——Storyboard

到目前为止我们还没有解释我们的程序是如何显示默认视图界面的。做过WinForm程序的朋友都知道每个Window窗口界面都有一个设计器(对应一个设计文件),其实在...

35740

扫码关注云+社区

领取腾讯云代金券