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

来源：互联网发布：查看网络运营商编辑：程序博客网时间：2024/06/08 15:45

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;

这里写图片描述

0 0