React Native（iOS）新手小白零基础自学（二）Text组件

这一节学习Text组件，话不多说，用实际小模块来实践一下。如下图所示：

屏幕快照 2016-04-29 下午1.12.29.png

偷个懒~~~_{(>_<)}~~~

屏幕快照 2016-04-26 下午7.22.53.png

1.封装头部组件 ：先新建一个文件 header.js

var React = require('react-native');

var {
  AppRegistry,
  StyleSheet,
  View,
  Text,
  PixelRatio
} = React;
/*
  首先对于有三个Text,分别表示“网易”、“新闻”、“有态度”

  这里我们在外层嵌套了一个Text，这样Text就不会按照flexbox布局 ，这样我们给了一个全局的样式font。
  然后再分别对'新闻'、'有态度'分别设置fontOne、fontTwo
 */
var Header = React.createClass({
  render: function(){
    return (
      
        
          網易
          新闻
          有态度°
        
      
    );
  }
});

/*
  flex
  alignItems:'center'  使Text组件水平居中
  其他参数不用解释

  font
  textAlign:'center'  使文字在Text组件中居中

*/

var styles = StyleSheet.create ({
  flex: {
    marginTop:25,
    height:50,
    borderBottomWidth:3/PixelRatio.get(),
    borderColor:'#EF2D36',
    alignItems:'center'
  },
  font: {
    fontSize:25,
    fontWeight:'bold',
    textAlign:'center'
  },
  fontOne: {
    color:'#CD1D1C'
  },
  fontTwo: {
    color:'#fff',
    backgroundColor:'#CD1D1C'
  }
});
/*
  exports 成独立组件
*/
module.exports = Header;

然后我们可以测试一下封装后的效果，在index.ios.js文件中写如下代码：

var React = require('react-native');
var Header = require('./header'); //加载Header组件

var {
  AppRegistry,
  StyleSheet,
  View,
  Text
} = React;

var app = React.createClass ({
  render: function(){
    return (
      
        

      
    );
  }
});

var styles = StyleSheet.create ({
  flex: {
    flex:1
  },
});

AppRegistry.registerComponent('InformationServicesRN' , () => app);

实现效果如下：

屏幕快照 2016-04-26 下午9.48.04.png

2.列表组件
列表看起来和iOS的tableview差不多，React Native有封装好的，也可以直接调用原生的，这里为了练习Text我们就自己做简单的封装。每一条新闻可以独立成一个简单的组件，同时还希望提供一个title，而不是写死在组件中（有点自定义cell，再提供一个外部title 的意思）。这里直接在index.ios.js里面写

/*
  封装List组件（类似于函数）
 */
var List = React.createClass ({
  render: function(){
    return (
      
        {this.props.title}
      
    );
  }
});

然后在程序入口app中使用刚才封装好的List组件

var app = React.createClass ({
  render: function(){
    return (
      
        

        
        
        
        
      
    );
  }
});

样式为：

var styles = StyleSheet.create ({
  flex: {
    flex:1
  },
  listItem: {
    height:40,
    marginLeft:10,
    marginRight:10,
    borderBottomWidth:1,
    borderBottomColor:'#ddd',
    justifyContent:'center'
  },
  listItemFont: {
    fontSize:16
  }
});

展示效果如下：

屏幕快照 2016-04-29 下午12.40.09.png

3.完成“今日要闻”
要完成三个功能：标题展示、当标题超过两行时，用（...）表示、点击标题弹出标题内容。和List一样，我们也做一个封装以便调用：

/*
  封装ImportantNews组件
      用this.props属性接收外部传入的参数
      增加onPress事件，当新闻被按下时通过bind调用show方法，弹出标题
      bind方法中： this表示上下文对象，类似于OC中的self
                this.props.news[i]  传递参数
      numberOfLines = {2}  表示显示2行，和OC中的差不多
      {this.props.news[i]}  获取传递数据
 */
var ImportantNews = React.createClass ({
  show: function(title) {
    alert(title);
  },
  render: function() {
    var news = [];
    for (var i in this.props.news) {
      var text = (
        
          {this.props.news[i]}
        
      );
      news.push(text);
    }
    return (
      
        今日要闻
        {news}
      
    );
  }
});

然后在app中调用

样式为：

  newsTitle: {
    fontSize:20,
    fontWeight:'bold',
    color:'#CD1D1C',
    marginLeft:10,
    marginTop:15
  },
  newsItem: {
    marginLeft:10,
    marginRight:10,
    fontSize:15,
    lineHeight:20
  }

看看效果吧~