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 ...
随机推荐
- redis加入到Windows系统服务
1.cmd命令,到redis的安装目录输入以下命令 安装命令: redis-server.exe --service-install redis.windows.conf --loglevel ve ...
- 6.安装和配置OpenStack图片服务组件
安装和配置图片服务组件 这里是安装在控制器上 安装和配置图片服务组件 yum install –y openstack-glance python-glanceclient 编辑/etc/glance ...
- 【Android开发日记】之入门篇(二)——调试
程序员有一半的时间花在测试BUG身上,而作为一个程序员遇上BUG是不可避免的事情.所以掌握好调试BUG的技术就显得至关重要.接下来我来讲述调试的几个要点. 一.调试机器的选择(模拟器) eclipse ...
- Web前端培训学习心得
web前端工程师技术日趋成熟,越来越多的行业巨头正不断向web前端工程师示好,在未来几年,web前端将会以更多的形式渗透到我们生活中的方方面面,因此越来越多的从业者开始关注web前端开发行业,今天小编 ...
- Codeforces Round #109 (Div. 2) A. I_love_%username%【打擂台算法/满足当前数字在已经出现的数字的最大值和最小值之间的个数】
A. I_love_%username% time limit per test 2 seconds memory limit per test 256 megabytes input standar ...
- SpringBoot事物管理器
一.springboot整合事物管理 springboot默认集成事物,只主要在方法上加上@Transactional即可 二.SpringBoot分布式事物管理 使用springboot+jta+a ...
- java 概括
作者:Dnvce链接:https://www.zhihu.com/question/61950442/answer/441166734来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载 ...
- [BZOJ 1037] 生日聚会Party
Link: BZOJ 1037 传送门 Solution: 由于对任意一段都有要求,于是我们对于所有前缀考虑其后缀不超过$k $即可: 设$dp[i][j][x][y]$为前$i$个人中有$j$个男孩 ...
- Mybatis中的XML中需要用到的转义符号整理
使用这么久的Mybatis中需要转义的符号整理一下,小结一下: 1. < 小于符号 < 2. <= 小于等于 ...
- (转)Unity3d各种坑
1.unity的资源包一旦量很大的时候卸载不干净,你可以尝试反复切场景 ,内存诡异的 增加 一直到爆,assetsbundle.unload(true);有问题 你想要卸载你必须先让你加载过的资源为n ...