React Native（iOS）新手小白零基础自学（二）Tex

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

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

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 (
      <View style={styles.flex}>
        <Text style={styles.font}>
          <Text style={styles.fontOne}>網易</Text>
          <Text style={styles.fontTwo}>新闻</Text>
          <Text>有态度°</Text>
        </Text>
      </View>
    );
  }
});

/*
  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 (
      <View style={styles.flex}>
        <Header></Header>
      </View>
    );
  }
});

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

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

实现效果如下：

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

/*
  封装List组件（类似于函数）
 */
var List = React.createClass ({
  render: function(){
    return (
      <View style={styles.listItem}>
        <Text style={styles.listItemFont}>{this.props.title}</Text>
      </View>
    );
  }
});

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

var app = React.createClass ({
  render: function(){
    return (
      <View style={styles.flex}>
        <Header></Header>
        <List title='宇航员在太空宣布"三体"获奖'></List>
        <List title='NASA发短片纪念火星征程50年'></List>
        <List title='男生连续做一周苦瓜吃吐女友'></List>
        <List title='女童遭鲨鱼袭击又下海救伙伴'></List>
      </View>
    );
  }
});

样式为：

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

展示效果如下：

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 = (
        <Text
          onPress = {this.show.bind(this, this.props.news[i])}
          numberOfLines = {2}
          style = {styles.newsItem}>
          {this.props.news[i]}
        </Text>
      );
      news.push(text);
    }
    return (
      <View style={styles.flex}>
        <Text style={styles.newsTitle}>今日要闻</Text>
        {news}
      </View>
    );
  }
});

然后在app中调用

<ImportantNews news = {[
          '1、刘慈欣《三体》获雨果奖，为中国作家首次，为中国作家首次',
          '2、京津冀协同发展定位明确：北京无经济中心表述',
          '3、好奇宝宝第一次淋雨，好奇宝宝第一次淋雨好奇宝宝第一次淋雨好奇宝宝第一次淋雨好奇宝宝第一次淋雨好奇宝宝第一次淋雨好奇宝宝第一次淋雨好奇宝宝第一次淋雨',
          '4、人名邮电出版社即将出版《React Native入门与实战》，读者可以用JavaScript开发应用']}>
        </ImportantNews>

样式为：

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

看看效果吧~