Text 组件

代码实现

在 index.ios.js中

//Text 组件//Timport React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  View} from 'react-native';/*  常用特性:  onPress       手指的触摸事件  number         显示多少行  可以设置字体颜色,大小,对齐方式等 *//** * 界面布局分为两部分: * Header 和新闻信息 * * 整个页面是一个组件,有两个子组件组成 * * 如果都是写在 index.ios.js 文件中,代码比较乱 * 在单独一个文件中定义子组件,使用 Module.exports 将组件导出为独立的模块,可以在其他文件中引用 *///引入var Header = require("./header");var HelloReactNative = React.createClass({  render:function () {    return(      <View style={styles.flex}>      <Header></Header>      </View>    );  }});var styles = StyleSheet.create({  flex:{    flex:1  }});AppRegistry.registerComponent('HelloReactNative', () => HelloReactNative);

---

创建一个新的 JS 文件,解耦代码(header.js)

import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  View} from 'react-native';//组件var Header = React.createClass({  render:function () {    return(      <View style={styles.flex}>        <Text style={styles.font}>          <Text style= {styles.font_1}>网易</Text>          <Text style= {styles.font_2}>新闻</Text>          <Text>有态度</Text>        </Text>      </View>    );  }});//样式 var styles = StyleSheet.create({   flex:{     marginTop:25,     height:40,     borderBottomWidth:1,     borderBottomColor:"#EF2D36",     alignItems:"center",   },   //字体设置的公共部分  font:{    fontSize:25,    fontWeight:"bold",    textAlign:"center",  },  font_1:{    color:"#CD1D1C",  },  font_2:{    color:"#FFF",    backgroundColor:"#CD1D1C",  } });//导出模块module.exports = Header;

---

---

加另一个 js 文件和实现弹框

创建一个新的 JS 文件,解耦代码(news.js)

import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  View} from 'react-native';//组件var News = React.createClass({  //弹框  show: function(title) {    alert(title);  },  render: function() {    //定义数组,用于存储设置好的 Text 组件    var newsComponents = [];    //遍历存储信息的数组,从外部传入的    for (var i in this.props.news){      var text = (        <Text        onPress={this.show.bind(this,this.props.news[i])}//弹框        style={styles.news_item}        numberOfLines={2}        key={i}>          {this.props.news[i]}        </Text>      );      //将设置好的 Text 存入数组      newsComponents.push(text);    }    return(      <View style={styles.flex}>        <Text style={styles.news_title}>今日要闻</Text>        {newsComponents}      </View>    );  }});//样式var styles = StyleSheet.create({  flex:{    flex:1,  },  // "今日要闻"标题  news_title:{    fontSize:20,    fontWeight:"bold",    color:"#CD1D1C",    marginTop:15,    marginLeft:10  },  // 每条新闻  news_item:{    marginTop:10,    marginLeft:10,    marginRight:10,    fontSize:15,    lineHeight:30  }});//导出模块module.exports = News;

在 index.ios.js中添加 news 内容

//Text 组件//Timport React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  View} from 'react-native';/*  常用特性:  onPress       手指的触摸事件  number         显示多少行  可以设置字体颜色,大小,对齐方式等 *//** * 界面布局分为两部分: * Header 和新闻信息 * * 整个页面是一个组件,有两个子组件组成 * * 如果都是写在 index.ios.js 文件中,代码比较乱 * 在单独一个文件中定义子组件,使用 Module.exports 将组件导出为独立的模块,可以在其他文件中引用 *///引入var Header = require("./header");var News = require("./news");//引入 newsvar HelloReactNative = React.createClass({  render:function () {    //定义一个数组存储新闻内容    var news = [      "1.快速了解微信小程序的使用,一个根据小程序的框架开发的 todos app",      "2.[移动开发]关于视频直播技术,你想要",      "3.谈谈一些有趣的 CSS 题目(三) -- 层叠顺序与堆栈上下文值多少",      "4.将 Reactnative 整合进 iOS 项目中超详细图文教程"    ];    return(      <View style={styles.flex}>      <Header></Header>      <News news={news}></News>      </View>    );  }});var styles = StyleSheet.create({  flex:{    flex:1  }});AppRegistry.registerComponent('HelloReactNative', () => HelloReactNative);

---

---

出现的Error

> 注意: 代码中的属性不要打错