React Native自定义组件、props

开头导入React

import React, { Component } from 'react';
复制代码

导入需要的组件

import {
    AppRegistry,
    StyleSheet,
    View,
    Text
} from 'react-native';
复制代码

最后一行必须加

module.exports =  Header; //后面放类名
复制代码

例子：

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    View,
    Text,
	PixelRatio
} from 'react-native';
class Header extends Component{
	render(){
		return (
			<View style={styles.flex}>
				<Text style={styles.font}>
				<Text style={styles.font1}>网易</Text>
				<Text style={styles.font2}>新闻</Text>
				<Text>有态度</Text>
				</Text>
			</View>
		);
    }
}

const styles = StyleSheet.create({
		flex:{
			marginTop:25,
			height:50,
			borderBottomWidth: 3/PixelRatio.get(),
			borderBottomColor: '#EF2D36',
			alignItems: 'center',
		},
		font:{
			fontSize: 25,
			fontWeight: 'bold',
			textAlign: 'center',
		},
    	font1:{
     	   color: '#CD1D1C',
   		 },
   		 font2:{
             color: '#FFF',
			 backgroundColor: '#CD1D1C',
   		 },

});

module.exports =  Header;
复制代码

需要的文件中 首字母必须大写 否则会报错

var Header = require('./js/components/Header.js');
复制代码

props

在自定义组件我们希望可以把标题传入到组件中，而不是写死。 在这通过props接收外部属性

<Text style={styles.list_item_font}>{this.props.title}</Text>
复制代码

其他地方代码一致。注意 module.exports = ImportantNews; 后面为类名 新建一个数组。 将参数中的news变为text数组传入。
.push（）相当于 .add numberOfLines为两行 onPress调用text的点击事件。传递参数时需要.bind这个参数第一个参数为上下文对象，this，第二个为传递数据，这里传入传入的文本， 之后使用的 alert函数。为全局函数 在View下直接使用{news}

	render(){
        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.news_item}>
					  {this.props.news[i]}
				</Text>
			);
        	news.push(text);
		}
		return (
			<View style={styles.flex}>
				<Text style={styles.news_title}>进入要闻</Text>
				{news}
			</View>
		);
    }
    show(title){
        Alert.alert(title);
    }
复制代码