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('./Component/Main'); class NewsDemo extends Component {
render() {
return (
<Main />
);
}
} AppRegistry.registerComponent('NewsDemo', () => NewsDemo);
3.Main.js
/**
* 主页面
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native'; var Main = React.createClass({
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
主页面
</Text>
</View>
);
}
}); const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
}); // 输出类
module.exports = Main;
4.效果图
.
react-native 项目实战 -- 新闻客户端(1) -- 初始化项目结构的更多相关文章
- react-native 项目实战 -- 新闻客户端(7) -- 新闻详情页
http://c.3g.163.com/nc/article/BUH64L0J00031H2L/full.html 观察这个地址,BUH64L0J00031H2L 就是每条新闻数据里的postid. ...
- react-native 项目实战 -- 新闻客户端(6) -- 完善ListView头部视图
1.因为需要定时器,所以我们要cd到当前项目根目录下安装这个类库: $ npm i react-timer-mixin --save 2.Component/ScrollImage.js /** * ...
- react-native 项目实战 -- 新闻客户端(4) -- 请求网络数据
1.Home.js /** * 首页 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Te ...
- react-native 项目实战 -- 新闻客户端(3) -- 包装导航控制器
1.修改后的 Main.js /** * 主页面 */ import React, { Component } from 'react'; import { StyleSheet, Text, Vie ...
- react-native 项目实战 -- 新闻客户端(2) -- 完善TabBar
1.创建 drawable-xxhdpi 文件夹,保存 TabBar 的 icon图标 android -- app -- src -- main -- res -- drawab ...
- react-native 项目实战 -- 新闻客户端(5) -- 完善首页列表数据
1.Home.js: /** * 首页 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, T ...
- 学习React Native必看的几个开源项目
学习React native ,分享几个不错的开源项目,相信你学完之后,一定会有所收获.如果还没有了解RN的同学们可以参考手把手教你React Native 实战之开山篇<一> 1.Fac ...
- [转] 学习React Native必看的几个开源项目
http://www.lcode.org/study-react-native-opensource-one/ http://gold.xitu.io/entry/575f498c128fe10057 ...
- React Native学习(二)—— 开始一个项目
本文基于React Native 0.52 一.创建一个项目 1.初始化一个RN项目 react-native init RNDemo 2.连接一个设备或是打开模拟器 可以通过 adb devices ...
随机推荐
- npoi导出excel 导出List<T>
using System.Collections.Generic; using NPOI.HSSF.UserModel; using NPOI.SS.UserModel; using NPOI.XSS ...
- web页面效果开源框架收集整合
1.EasyUI:http://www.jeasyui.com/index.php 2.Bootstrap:http://www.bootcss.com/ 3.jqueryui:http://jque ...
- [ CodeVS冲杯之路 ] P1011
不充钱,你怎么AC? 题目:http://codevs.cn/problem/1011/ 一开始以为是道数学题,列出了一个公式 后面验证,发现只能推出第一次,后面的还需要迭代,推翻这个公式 又去瞟了一 ...
- Linux/Android——input_handler之evdev (四) 【转】
转自:http://blog.csdn.net/u013491946/article/details/72638919 版权声明:免责声明: 本人在此发文(包括但不限于汉字.拼音.拉丁字母)均为随意敲 ...
- Python’s super() considered super!
如果你没有被Python的super()惊愕过,那么要么是你不了解它的威力,要么就是你不知道如何高效地使用它. 有许多介绍super()的文章,这一篇与其它文章的不同之处在于: 提供了实例 阐述了它的 ...
- mysql 取消命令行继续编辑
mysql> create database mingongge defa\c#回车 置空mysql> 加一个\c cancel 编辑命令 回车
- 利用Log4net组件记录日志
项目中利用Log4net记录日志还是比较方便的,我也按照网上的一些操作进行了实践 参考文章 1:Log4Net使用指南2:LOG4NET日志配置 组件下载 log4net组件下载 1:设置配置文件,这 ...
- ZOJ 3940 Modulo Query (2016年浙江省赛E题,区间折叠 + map运用)
题目链接 2016 ZJCPC Problem E 考虑一个开区间$[0, x)$对$a_{i}$取模的过程. $[0, x)$中小于$a_{i}$的部分不变,大于等于$a_{i}$的部分被切下来变 ...
- HDU 5916: Harmonic Value Description
题目描述 The harmonic value of the permutation $p_1,p_2,\cdots p_n$ is$$\sum_{i=1}^{n-1} gcd(p_i.p_{i+1} ...
- android新创建一个Activity时,会创建哪些部分
在创建时,会提示创建部分. 详细部分: