×

React Native组件--View&Text

96
芝麻绿豆
2016.06.24 11:31* 字数 387

相关知识

  • 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) 弹出提示框
React Native学习笔记
Web note ad 1