Text 组件

Text 组件

代码实现

在 index.ios.js中

//Text 组件
//T
import 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 组件
//T
import 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");//引入 news

var 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

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