react-native 项目实战 -- 新闻客户端(1) -- 初始化项目结构
2017-07-29 17:02
561 查看
1.在项目根目录新建
2.修改 index.android.js
3.Main.js
4.效果图
.
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 项目实战 -- 新闻客户端(4) -- 请求网络数据
- react-native 项目实战 -- 新闻客户端(3) -- 包装导航控制器
- react-native 项目实战 -- 新闻客户端(7) -- 新闻详情页
- react-native 项目实战 -- 新闻客户端(6) -- 完善ListView头部视图
- react-native 项目实战 -- 新闻客户端(5) -- 完善首页列表数据
- react-native 项目实战 -- 新闻客户端(2) -- 完善TabBar
- 新闻客户端01 - 初始化项目结构
- React Native商城项目实战03 - 包装Navigator
- React Native商城项目实战15 - 首页购物中心
- React-Native 之 项目实战(二)
- React Native移动开发实战-2-如何调试React Native项目
- React-Native 之 项目实战(二)
- React Native开源项目-贷贷助手客户端
- React Native商城项目实战10 - 个人中心中间内容设置
- React Native商城项目实战13 - 首页中间上部分内容
- React_Native 项目实战 (1) (首页,以及页面的切换)
- react_native 项目实战 (4) 自定义分类 使用 CheckBox 以及 数据存储asyncStorage
- react-native学习(RN)--之Window环境下搭建环境配置,以及初始化建立react-native项目,(真机和模拟器运行的相关错误解决办法,android打包报错)
- React-Native 之 项目实战(二)
- React Native 入门(二) - Hello World 项目初始化