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 ...
随机推荐
- poj 3071 Football (概率DP水题)
G - Football Time Limit:1000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Submit ...
- 积木大赛(NOIP2013)(纯贪心+模拟)
好吧,这道题也是..醉了. 其实题目编程挺水的,但是贪心过程不好想. 原题传送门 这道题对于任何一个点a[i]如果a[i]<a[i-1]的话,那么假设a[i-1]的高度为X,a[i]的高度为y, ...
- 搭建github服务器
https://about.gitlab.com/downloads/#centos6
- UVA 10801 Lift Hopping 最短路
2种方式直接代码就可以了.注意首次不需要60S的转换 #include <map> #include <set> #include <list> #include ...
- 华为上机测试题(MP3光标移动-java)
PS:此题满分,可参考 描述: MP3 Player因为屏幕较小,显示歌曲列表的时候每屏只能显示几首歌曲,用户要通过上下键才能浏览所有的歌曲.为了简化处理,假设每屏只能显示4首歌曲,光标初始的位置为第 ...
- ros结合catkin_make和qtcreator
首先是ros官网关于IDE的教程: http://wiki.ros.org/IDEs#QtCreator 1.qtcreator安装 从官网上下载.run文件, https://info.qt.io/ ...
- JAVA泛型练手
公司电脑不能安装JAVA环境,不爽啊. import java.util.List; import java.util.ArrayList; import java.lang.reflect.Meth ...
- AC日记——玻璃切割 51nod 1562
玻璃切割 思路: 并查集: 离线操作: 先把每次切割都存下来: 然后从后面不断合并切割: 然后每次更新最大长和宽: 记录答案: 要开longlong: 来,上代码 #include <cstdi ...
- HDU 2191 【多重背包】
Input 输入数据首先包含一个正整数C,表示有C组测试用例,每组测试用例的第一行是两个整数n和m(1<=n<=100, 1<=m<=100),分别表示经费的金额和大米的种类, ...
- NYOJ16 矩形嵌套 【DAG上的DP/LIS】
矩形嵌套 时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述 有n个矩形,每个矩形可以用a,b来描述,表示长和宽.矩形X(a,b)可以嵌套在矩形Y(c,d)中当且仅当a<c ...