ReactNative学习第四天 WebStorm安装及项目顶部效果

 从今天开始我打算做一个仿网易新闻demo,让自己练练手。为什么选新闻类的呢,一是简单,适合初学者,二是功能技术点齐全。

 我选择WebStorm IDE,它的好处我就不多说了,都懂的。

 

 第一步当然是环境的安装了

 1.ReactNative就不多说了,看我前面的几篇博客,里面有提到,我也是参考
ReactNative中文网的哈。

 2.WebStorm IDE 的安装比较简单,到WebStorm官网下一个安装下就可以了。

 3.如何导入一个ReactNative项目呢。下面有篇教程

 http://www.cnblogs.com/shaoting/p/6110202.html

 

 今天先写一个小小的功能:头部红色条

 


 我们先创建一个Header.js文件

 

 'use strict';

 

 import React from 'react';

 import {

     AppRegistry,

     StyleSheet,

     View

 } from 'react-native';

 

 export default class Header extends React.Component {

     render() {

         return (

             <View style={styles.container}>

             </View>

         );

     }

 }

 

 const styles = StyleSheet.create({

     container: {

         flexDirection: 'row',

         paddingLeft: 10,

         paddingRight: 10,

         paddingTop: 0,

         height: 68,

         backgroundColor: '#d74047',

         alignItems: 'center'

     }});

 

 然后在index.ios.js里面引用

 

 import React, { Component } from 'react';

 import {

     AppRegistry,

     StyleSheet,

     View

 } from 'react-native';

 

 import Header from './Header'

 

 export default class NewsProject extends Component {

     render() {

         return (

             <Header>

             </Header>

         );

     }

 }

 

 AppRegistry.registerComponent('NewsProject', () => NewsProject);

 

 运行项目看看效果