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) -- 初始化项目结构的更多相关文章

  1. react-native 项目实战 -- 新闻客户端(7) -- 新闻详情页

    http://c.3g.163.com/nc/article/BUH64L0J00031H2L/full.html 观察这个地址,BUH64L0J00031H2L 就是每条新闻数据里的postid.  ...

  2. react-native 项目实战 -- 新闻客户端(6) -- 完善ListView头部视图

    1.因为需要定时器,所以我们要cd到当前项目根目录下安装这个类库: $ npm i react-timer-mixin --save 2.Component/ScrollImage.js /** * ...

  3. react-native 项目实战 -- 新闻客户端(4) -- 请求网络数据

    1.Home.js /** * 首页 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Te ...

  4. react-native 项目实战 -- 新闻客户端(3) -- 包装导航控制器

    1.修改后的 Main.js /** * 主页面 */ import React, { Component } from 'react'; import { StyleSheet, Text, Vie ...

  5. react-native 项目实战 -- 新闻客户端(2) -- 完善TabBar

    1.创建 drawable-xxhdpi 文件夹,保存 TabBar 的 icon图标 android  --  app  --  src  --  main  --  res  --  drawab ...

  6. react-native 项目实战 -- 新闻客户端(5) -- 完善首页列表数据

    1.Home.js: /** * 首页 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, T ...

  7. 学习React Native必看的几个开源项目

    学习React native ,分享几个不错的开源项目,相信你学完之后,一定会有所收获.如果还没有了解RN的同学们可以参考手把手教你React Native 实战之开山篇<一> 1.Fac ...

  8. [转] 学习React Native必看的几个开源项目

    http://www.lcode.org/study-react-native-opensource-one/ http://gold.xitu.io/entry/575f498c128fe10057 ...

  9. React Native学习(二)—— 开始一个项目

    本文基于React Native 0.52 一.创建一个项目 1.初始化一个RN项目 react-native init RNDemo 2.连接一个设备或是打开模拟器 可以通过 adb devices ...

随机推荐

  1. npoi导出excel 导出List<T>

    using System.Collections.Generic; using NPOI.HSSF.UserModel; using NPOI.SS.UserModel; using NPOI.XSS ...

  2. web页面效果开源框架收集整合

    1.EasyUI:http://www.jeasyui.com/index.php 2.Bootstrap:http://www.bootcss.com/ 3.jqueryui:http://jque ...

  3. [ CodeVS冲杯之路 ] P1011

    不充钱,你怎么AC? 题目:http://codevs.cn/problem/1011/ 一开始以为是道数学题,列出了一个公式 后面验证,发现只能推出第一次,后面的还需要迭代,推翻这个公式 又去瞟了一 ...

  4. Linux/Android——input_handler之evdev (四) 【转】

    转自:http://blog.csdn.net/u013491946/article/details/72638919 版权声明:免责声明: 本人在此发文(包括但不限于汉字.拼音.拉丁字母)均为随意敲 ...

  5. Python’s super() considered super!

    如果你没有被Python的super()惊愕过,那么要么是你不了解它的威力,要么就是你不知道如何高效地使用它. 有许多介绍super()的文章,这一篇与其它文章的不同之处在于: 提供了实例 阐述了它的 ...

  6. mysql 取消命令行继续编辑

    mysql> create database mingongge defa\c#回车 置空mysql>  加一个\c  cancel 编辑命令 回车

  7. 利用Log4net组件记录日志

    项目中利用Log4net记录日志还是比较方便的,我也按照网上的一些操作进行了实践 参考文章 1:Log4Net使用指南2:LOG4NET日志配置 组件下载 log4net组件下载 1:设置配置文件,这 ...

  8. ZOJ 3940 Modulo Query (2016年浙江省赛E题,区间折叠 + map运用)

    题目链接  2016 ZJCPC Problem E 考虑一个开区间$[0, x)$对$a_{i}$取模的过程. $[0, x)$中小于$a_{i}$的部分不变,大于等于$a_{i}$的部分被切下来变 ...

  9. 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} ...

  10. android新创建一个Activity时,会创建哪些部分

    在创建时,会提示创建部分. 详细部分: