新闻客户端01 - 初始化项目结构

1.在项目根目录新建Componet文件夹（专门用来放我们的自定义组件），里面新建Main.js、Home.js、Message.js、Mine.js、Find.js

2.修改index.ios.js和index.android.js，引用外部Main.js

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View } from 'react-native'; // 引用外部组件 var Main = require('./Component/Main'); class NewsDemo extends Component { render() { return ( <Main /> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, }); 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;