React Native组件--View&Text

相关知识

• AppRegistry ：负责注册APP入口组件；
• StyleSheet：负责创建样式表；
• React.createClass:创建入口组件
• render：负责渲染视图,必须返回一个JSX对象(返回组件结构)
• StyleSheet.create:创建一个样式对象
• registerComponent('HelloWorld', () => HelloWorld)：第一个参数为项目名称，第二个参数为入口组件对象
• console.log(news); 打印 相当与NSLog();
• push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
• var Header = require('./Header’);/ const Header = require('./Header'); 引入Header.js文件
• module.exports = Header; 返回一个全局共享的变量或常量；
• PixelRatio:获取高清设备的像素比；1/PixelRatio.get()获得最小线宽；

组件的生命周期

• 1.创建阶段：getDefaultProps
• 2.实例化阶段：getInitialState
• 3.更新阶段：componentWillRecieveProps
• 4.销毁阶段：componentWillUnmount

声明类和导入头文件的几种格式：

• 格式1：

'use strict';
var React = require('react'); 
var ReactNative = require('react-native');
var {  
AppRegistry,  
StyleSheet,  
Text,  
View, 
 TextInput,
} = ReactNative;
var navigator =  Rect.createClass( {  
render() {    
return (

    );  }
});

• 格式2：

import React from 'react'; 
import {  
AppRegistry,  
Text 
} from 'react-native';
const App  = React.createClass( { 
 return (   
<Text>Hello World!</Text> 
 );
});
AppRegistry.registerComponent('MyApp', () => App);

• 格式3：

 import React, { Component, } from 'react'; 
import { 
 AppRegistry,  
Image,  
ListView,  
StyleSheet, 
 Text, 
 View, } from 'react-native'; 
class SampleAppMovies extends Component {  
 render() {              
return (              );     
    }
}

View

• 容器组件；
• 可以多层嵌套;
• 支持flexbox布局；

            <View style = {[styles.flex]}>
            </View>

Text

• onPress：支持手指触摸事件(点按事件)；

onPress = {this.show.bind(this,this.props.news[i])}：bind方法第一个参数是上下文，第二个参数是需要传递的参数；
this.props：子组件调用父组件的属性

• numberOfLines:规定显示多少行；

numberOfLine = {2} 最多显示两行

• onLayout:获取元素布局的位置和大小；
  点击弹出提示框：

                <Text 
                key = {i}
                onPress = {this.show.bind(this,this.props.news[i])}
                numberOfLine = {2}
                style = {[styles.news_item]}>
                {this.props.news[i]}
                </Text>

    show:function(title){
        alert(title);
    },

补充

标签	作用	备注
flex	平铺整个屏幕
borderWidth	边框的宽度
borderColor	边框的颜色
flexDirection	布局方向（column，row）	默认是纵向：column
justifyContent	沿主轴线的对齐方式	flex-start,flex-end,center,space-between,space-around
alignItems	交叉轴上的对齐方式	flex-start,flex-end,center，baseline,stretch
marginTop	与顶部的间距	marginLeft，marginRight，marginBottom
borderRadius	设置圆角
backgroundColor	背景颜色	#ff0067
borderLeftWidth	边框左边宽度	borderRightWidth，borderBottomWidth
fontSize	字体大小
fontWeight	字体宽度
bold	加粗
alert(title)	弹出提示框