react-native 项目实战 -- 新闻客户端（1） -- 初始化项目结构

【react-native 项目实战 -- 新闻客户端（1） -- 初始化项目结构】的更多相关文章

react-native 项目实战 -- 新闻客户端（1） -- 初始化项目结构

1.在项目根目录新建Componet文件夹(专门用来放我们的自定义组件),里面新建Main.js.Home.js.Message.js.Mine.js.Find.js 2.修改 index.android.js /** * android */ import React, { Component } from 'react'; import { AppRegistry, } from 'react-native'; // 引用外部组件 var Main = require('./Componen…

react-native 项目实战 -- 新闻客户端（7） -- 新闻详情页

http://c.3g.163.com/nc/article/BUH64L0J00031H2L/full.html 观察这个地址,BUH64L0J00031H2L 就是每条新闻数据里的postid. 下面我们要取出里面的 html代码,然后拼接. 1.NewsDetail.js全部代码: /** * 新闻详情页 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, We…

react-native 项目实战 -- 新闻客户端（6） -- 完善ListView头部视图

1.因为需要定时器,所以我们要cd到当前项目根目录下安装这个类库: $ npm i react-timer-mixin --save 2.Component/ScrollImage.js /** * 滚动图 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, ScrollView, Image } from 'react-native'; // 引入Dimension…

react-native 项目实战 -- 新闻客户端（4） -- 请求网络数据

1.Home.js /** * 首页 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, ListView, Image, TouchableOpacity, Platform } from 'react-native'; // 导入本地json数据 var LocalData = require('../LocalData.json'); var Home = Re…

react-native 项目实战 -- 新闻客户端（3） -- 包装导航控制器

1.修改后的 Main.js /** * 主页面 */ import React, { Component } from 'react'; import { StyleSheet, Text, View, Image, Platform, //判断当前运行的系统 } from 'react-native'; /*=============导入外部组件类==============*/ import TabNavigator from 'react-native-tab-navigator'; i…

react-native 项目实战 -- 新闻客户端（2） -- 完善TabBar

1.创建 drawable-xxhdpi 文件夹,保存 TabBar 的 icon图标 android -- app -- src -- main -- res -- drawable-xxhdpi 2.修改后的 Main.js /** * 主页面 */ import React, { Component } from 'react'; import { StyleSheet, Text, View, Image, Platform, //判断当前运行的系统 } from '…

react-native 项目实战 -- 新闻客户端（5） -- 完善首页列表数据

1.Home.js: /** * 首页 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, ListView, Image, TouchableOpacity, Platform } from 'react-native'; // 导入本地json数据 var LocalData = require('../LocalData.json'); var Home = R…