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={{uri:'http://www.baidu.com'}}  加載網頁
        source={{html: this.state.html, baseUrl: ''}}
        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={{marginLeft:13}}
                            />
                        }
            onPress={()=>{goBack()}}
        />
    );
    return {headerStyle,headerTitle,headerTitleStyle,headerBackTitle,headerLeft,header}
};

通過下面的方式調用：

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

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

效果圖