2016-03-02 07:41:58 ncepudmx 阅读数 1135
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    58308 人正在学习 去看看 李宁

一、说明

react native出现有一段时间了,最近国内学习react native的人也越来越多。react native开发的资料也很多,具体可以参考:https://github.com/ele828/react-native-guide
大家可以参考提供的资料,自学使用。年前我也断断续续学习了一段时间,今年决定好好研究一番,在实例研究中我选择了知乎日报,因为自己深受知乎日报的荼毒,源码地址:https://github.com/race604/ZhiHuDaily-React-Native
我将分几个篇幅进行,在研究实例源码的过程中,对其中用到的知识点进行重点讲解。

二、下载安装

下载安装之前首先要搭建好react native的开发环境,参考地址:http://www.lcode.org/react-native/
一般情况Mac下环境搭建较为简单,Windows下容易出现较多问题。
在环境搭建好之后就可以下载知乎日报的源码了

  git clone https://github.com/race604/ZhiHuDaily-React-Native

下载好之后切换到项目目录中,运行服务

  react-native start

之后,需要重新打开一个命令行窗口,再切换到项目目录中,执行

  react-native run-android

程序将会自动安装到手机或是模拟器中(需要提前接入手机或是运行模拟器),成功运行之后的效果
Paste_Image.png

三、功能分析

应用打开时首先会有一个过渡界面,大约持续2s时间,过渡界面展示一张图片,伴随有图片放大的动画效果。
splash.gif
然后进入主界面,主界面顶部以图片轮播的形式展示热门文章,然后就是文章列表,每个文章以标题加图片的形式展现。点击左上角菜单图标,显示侧滑菜单,用户可以选择不同主题的内容,选择之后主界面的列表随之变化。其他按钮功能未实现。
main.gif

四、目录结构分析

现在我们看一下源码的目录结构,

Paste_Image.png

文件名 说明
android 存放Android原生代码
art 放了几张截图
ios 存放ios原生代码
DataRespository.js 数据仓储,提供远程访问和数据缓存功能
DetailToolbar.js 界面的标题栏组件
index.android.js android应用的入口
index.ios.js ios应用的入口
MainScreen.android.js android应用的主界面
MainScreen.ios.js ios应用的主界面
SplashScreen.js 过渡界面
StoriesList.js 文章列表组件
StoryItem.js 文章列表组件的子项
StoryScreen.js 文章详情界面
SwipeRefreshLayout 下拉刷新控件,引用原生模块
ThemeList.js 可订阅主题的列表
WebView.js 自定义的WebView,引用原生模块,用于显示文章详情

五、总结

本篇作为知乎日报(RN版)源码分析的第一篇,主要介绍对App的安装使用做了简单说明,并且对源码的目录结构进行了介绍,接下来我将根据应用的执行流程对源码进行分析,对其中涉及到的RN的知识点进行重点讲解,从实例源码中学习RN开发的基本技能。

2015-12-30 18:21:30 u011282069 阅读数 1372
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    58308 人正在学习 去看看 李宁

主要练习从服务器获取数据,然后展示到界面,最外层用ScrollView包裹起来顶部是一个ViewPager,api使用的知乎日报的api,在这里只使用了一个主题日报列表查看的api,获取到json数据之后,显示到ListView中.最终效果如下:

zhihu

获取网络数据

根据前面的文章React-Native 网络请求使用fetch方法来获取

_getData:function(){
  var datas = [];
  fetch('http://news-at.zhihu.com/api/4/themes')
  .then((response) => response.text())
  .then((responseText) => {
    var  jsonObject = eval("(" + responseText + ")");
    var array = jsonObject.others;
    for(var i=0; i<array.length; i++ ){
      datas.push(array[i]);
    }
    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(datas),
      isLoading: false
    });
  })
  .catch((error) => {
    console.warn(error);
  }).done;
  return datas;
},

上面的代码是从服务器获取的json数据, 使用 eval 方法将json字符串转为 javascript对象, 注意json字符串需要用 括号() 包裹起来,然后给listviwe设置数据

this.setState({
  dataSource: this.state.dataSource.cloneWithRows(datas),
  isLoading: false
});

ListView用来展示

代码比较简单,结合前面学习的很容易理解

<ListView
  dataSource={this.state.dataSource}
  renderRow={(rowData) =>
          <TouchableOpacity>
              <View style={{ flexDirection:'row' }}>
                <Image source={{ uri: rowData.thumbnail }} style={{height:60,width:80, margin:12,}} />
                <View>
                  <Text style={{ marginTop:12, color:'#234', fontSize:16,}}>{rowData.name}</Text>
                  <Text style={{ marginTop:12, color:'#888', fontSize:12,}}>{rowData.description}</Text>
                  <View style={{height:1.5,  backgroundColor:'#222' }}></View>
                </View>
              </View>
            </TouchableOpacity>
            }
/>

完整代码:


'use strict'

var React = require('react-native');

var {
  AppRegistry,
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
  Navigator,
  ScrollView,
  ViewPager,
  BackAndroid,
  ViewPagerAndroid,
  Image,
  ListView,
} = React;



BackAndroid.addEventListener('hardwareBackPress', function() {
  if(_navigator == null){
    return false;
  }
  if(_navigator.getCurrentRoutes().length === 1){
    return false;
  }
  _navigator.pop();
  return true;
});

var _navigator ;
var PAGES = 5;
var imageUrls = [
  'https://img.alicdn.com/bao/uploaded/i3/TB1vkdZKFXXXXaAXVXXXXXXXXXX_!!0-item_pic.jpg',
  'https://img.alicdn.com/bao/uploaded/i5/TB1CGo3KXXXXXb6XpXXYXGcGpXX_M2.SS2',
  'https://img.alicdn.com/bao/uploaded/i1/TB1jkifKVXXXXXhXXXXXXXXXXXX_!!0-item_pic.jpg',
  'https://img.alicdn.com/bao/uploaded/i2/TB1GCgoKVXXXXcaXpXXXXXXXXXX_!!0-item_pic.jpg',
  'https://img.alicdn.com/bao/uploaded/i1/TB1D6A7KVXXXXaQXVXXXXXXXXXX_!!0-item_pic.jpg',
]
var NewsView = React.createClass({

  getInitialState: function(){
    _navigator = this.props.navigator;
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    return {
      dataSource: ds.cloneWithRows(this._getData()),
    };
  },
  _getData:function(){
    var datas = [];
    fetch('http://news-at.zhihu.com/api/4/themes')
    .then((response) => response.text())
    .then((responseText) => {
      var  jsonObject = eval("(" + responseText + ")");
      var array = jsonObject.others;
      for(var i=0; i<array.length; i++ ){
        datas.push(array[i]);
      }
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(datas),
        isLoading: false
      });
    })
    .catch((error) => {
      console.warn(error);
    }).done;
    return datas;
  },

  render:function(){
    var pages = [];
    for (var i = 0; i < PAGES; i++) {
      pages.push(
        <View key={i} style={{ flex: 1, alignItems: 'stretch' }} collapsable={false}>
          <Image
            style={{ flex:1 }}
            source={{uri: imageUrls[i%PAGES] }}
          />
       </View>
      );
    }
    return (
      <ScrollView>
        <View>
          <ViewPagerAndroid
            style={styles.viewPager}
            initialPage={0}
            onPageScroll={this.onPageScroll}
            onPageSelected={this.onPageSelected}
            ref={viewPager => { this.viewPager = viewPager; }}>
            {pages}
          </ViewPagerAndroid>
          <ListView
            dataSource={this.state.dataSource}
            renderRow={(rowData) =>
                    <TouchableOpacity>
                        <View style={{ flexDirection:'row' }}>
                          <Image source={{ uri: rowData.thumbnail }} style={{height:60,width:80, margin:12,}} />
                          <View>
                            <Text style={{ marginTop:12, color:'#234', fontSize:16,}}>{rowData.name}</Text>
                            <Text style={{ marginTop:12, color:'#888', fontSize:12,}}>{rowData.description}</Text>
                            <View style={{height:1.5,  backgroundColor:'#222' }}></View>
                          </View>
                        </View>
                      </TouchableOpacity>
                      }
          />
        </View>
      </ScrollView>
    );
  },
});
var styles = StyleSheet.create({
  viewPager:{
    height : 200,
  },
});

module.exports = NewsView;

github地址

文章来自: http://hanks.xyz

2019-12-08 10:46:47 Leon_Jinhai_Sun 阅读数 60
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    58308 人正在学习 去看看 李宁

React 的发展历史

2018-07-03 15:19:52 ld11620967 阅读数 156
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    58308 人正在学习 去看看 李宁

Android精选源码

android实现高德地图轨迹效果源码

image

使用React Native(Android和iOS)实现的 知乎日报效果源码

image

一款整合百度翻译api跟有道翻译api的翻译君

RxEasyHttp一款基于RxJava2+Retrofit2实现简单易用的网络请求框架

image

RecyclerView侧滑菜单,Item拖拽,滑动删除Item,自动加载更…

image

android:ListView、RecyclerView两种方式实现聊天界面

image

RecyclerView两侧菜单功能、侧滑删除、 拖拽、根据type显示菜单

image

基于Material Design的todo待办记事应用源码

image

自定义基础掌握的16种模式示例图

android在视频中加入广告预览效果源码

image

Android优质博客

Android App启动时Apk资源加载机制源码分析

在Andorid开发中我们要设置文字或图片显示,都直接通过Api一步调用就完成了,不仅是我们工程下res资源以及系统自带的framwork资源也可以,那这些资源打包成Apk之后是如何被系统加载从而显示出来的呢。这里我要从Apk安装之后启动流程开始讲起,在桌面应用click事件之后 会通过Binder机制通知A… 阅读原文

技术解读美团外卖Android Crash治理之路!

Crash率是衡量一个App好坏的重要指标之一。如果你忽略了它的存在,它就会得寸进尺,愈演愈烈,最后造成大量用户的流失,进而给公司带来无法估量的损失。本文讲述美团外卖Android客户端团队在将App的Crash率从千分之三做到万分之二过程中所做的大量实践工作,抛砖引玉,希望能够为其他团队提供一些经验和启发。  面临的… 阅读原文

写给Android App开发人员看的Android底层知识(1)

(一)引言早在我还是Android菜鸟的时候,有很多技术我都不太明白,也都找不到答案,比如apk是怎么安装的,比如资源是怎么加载的。再比如说,每本书都会讲AIDL,但我却从来没用过。四大组件也是这个问题,我只用过Activity,其它三个组件,不但没用过,甚至连它们是做什么的,都不是很清楚。    … 阅读原文

Glide最新V4版使用指南

概述Glide是一个Android的图片加载和缓存库,它主要专注于大量图片的流畅加载,Glide几乎可以胜任任何你需要使用到图片从网络拉取,压缩,显示的场景。本文主要基于Glide4.0版本介绍其基本使用方法。1 集成Github地址: https://github.com/bumptech/glideapp阅读原文

Android应用瘦身,从18MB到12.5MB

最近在为我们开发的直播应用做 Android 端的安装包瘦身,花了大概一周的时间把安装包从 18MB 减小到了 12.5MB。原本完全可以优化到 10MB 之下,但由于其他原因的限制,所以目前阶段只到 12.5MB 为止。在此记录一下优化的思路和用到的工具,方便自己以后 Review ,有需要的童鞋也可供参考。瘦身的目… 阅读原文



欢迎扫码关注微信公众号

没有更多推荐了,返回首页