react-native 自定义组件

创建第一个组件

react-native 组件只需要在组件代码后面加上：module.exports = YoukuComponet; “YoukuComponet”是我这里将要创建的一个demo组件。

SudokuView组件的代码如下：

/**
 * Created by ypxu87 on 2016/11/13.
 */
import React, { Component } from 'react';
import {View,Text,Image,StyleSheet,Dimensions} from 'react-native'

class YoukuComponet extends Component{

    render() {
        var dataSourse = this.props.dataSourse;
        return (
            <View style={styles.container}>
                <Text style={{paddingLeft:3}}>{dataSourse.title}</Text>
                <View style={styles.row}>
                    <View style={styles.itemView}>
                        <Image source={dataSourse.list[0].imageSourse}
                            style={styles.image}>
                            <View style={{height:100}}/>
                            <Text style={{backgroundColor:'transparent',color:'white',paddingLeft:10}}>{dataSourse.list[0].disc}</Text>
                        </Image>
                        <Text style={{paddingLeft:10,marginTop:3}}>{dataSourse.list[0].title}</Text>
                        <View style={[styles.row,{paddingLeft:10,paddingTop:3}]}>
                            <Image source={require('../image/play.png')}
                            style={{width:13,height:13}}>
                            </Image>
                            <Text> {dataSourse.list[0].playTimes}</Text>
                        </View>
                    </View>
                    <View style={styles.itemView}>
                        <Image source={dataSourse.list[1].imageSourse}
                               style={styles.image}>
                            <View style={{height:100}}/>
                            <Text style={{backgroundColor:'transparent',color:'white',paddingLeft:10}}>{dataSourse.list[1].disc}</Text>
                        </Image>
                        <Text style={{paddingLeft:10,marginTop:3}}>{dataSourse.list[1].title}</Text>
                        <View style={[styles.row,{paddingLeft:10,paddingTop:3}]}>
                            <Image source={require('../image/play.png')}
                                   style={{width:13,height:13}}>
                            </Image>
                            <Text> {dataSourse.list[1].playTimes}</Text>
                        </View>
                    </View>
                </View>
                <View style={styles.row}>
                    <View style={styles.itemView}>
                        <Image source={dataSourse.list[2].imageSourse}
                               style={styles.image}>
                            <View style={{height:100}}/>
                            <Text style={{backgroundColor:'transparent',color:'white',paddingLeft:10}}>{dataSourse.list[2].disc}</Text>
                        </Image>
                        <Text style={{paddingLeft:10,marginTop:3}}>{dataSourse.list[2].title}</Text>
                        <View style={[styles.row,{paddingLeft:10,paddingTop:3}]}>
                            <Image source={require('../image/play.png')}
                                   style={{width:13,height:13}}>
                            </Image>
                            <Text> {dataSourse.list[2].playTimes}</Text>
                        </View>
                    </View>
                    <View style={styles.itemView}>
                        <Image source={dataSourse.list[3].imageSourse}
                               style={styles.image}>
                            <View style={{height:100}}/>
                            <Text style={{backgroundColor:'transparent',color:'white',paddingLeft:10}}>{dataSourse.list[3].disc}</Text>
                        </Image>
                        <Text style={{paddingLeft:10,marginTop:3}}>{dataSourse.list[3].title}</Text>
                        <View style={[styles.row,{paddingLeft:10,paddingTop:3}]}>
                            <Image source={require('../image/play.png')}
                                   style={{width:13,height:13}}>
                            </Image>
                            <Text> {dataSourse.list[3].playTimes}</Text>
                        </View>
                    </View>
                </View>
                <View style={styles.row}>
                    <View style={styles.itemView}>
                        <Image source={dataSourse.list[4].imageSourse}
                               style={styles.image}>
                            <View style={{height:100}}/>
                            <Text style={{backgroundColor:'transparent',color:'white',paddingLeft:10}}>{dataSourse.list[4].disc}</Text>
                        </Image>
                        <Text style={{paddingLeft:10,marginTop:3}}>{dataSourse.list[4].title}</Text>
                        <View style={[styles.row,{paddingLeft:10,paddingTop:3}]}>
                            <Image source={require('../image/play.png')}
                                   style={{width:13,height:13}}>
                            </Image>
                            <Text> {dataSourse.list[4].playTimes}</Text>
                        </View>
                    </View>
                    <View style={styles.itemView}>
                        <Image source={dataSourse.list[5].imageSourse}
                               style={styles.image}>
                            <View style={{height:100}}/>
                            <Text style={{backgroundColor:'transparent',color:'white',paddingLeft:10}}>{dataSourse.list[5].disc}</Text>
                        </Image>
                        <Text style={{paddingLeft:10,marginTop:3}}>{dataSourse.list[5].title}</Text>
                        <View style={[styles.row,{paddingLeft:10,paddingTop:3}]}>
                            <Image source={require('../image/play.png')}
                                   style={{width:13,height:13}}>
                            </Image>
                            <Text> {dataSourse.list[5].playTimes}</Text>
                        </View>
                    </View>
                </View>
            </View>
        )
    }

}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: 30,
        margin: 10
    },
    image:{
        width:(Dimensions.get('window').width -25)/2,
        height:(Dimensions.get('window').width)/3,
    },
    itemView:{
        flex:1,
        height:170
    },
    row:{
        flexDirection:'row'
    }
})

module.exports = YoukuComponet;

到这里，一个简单的优酷app组件就完成了，把它添加到相对于index.ios.js的这个目录下’./components/’

使用组件

首先我们声明YoukuComponent组件：
import YoukuComponent from ‘./components/youkucomponet’
然后在渲染函数render里面就可以直接调用了，当然你也可以采用其他方式调用，这里只是做一个简单的介绍。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import YoukuComponent from './components/youkucomponet'

export default class youkuComponent extends Component {
  render() {
    var dataSourse = {
      title:'今日精选',
      list:[
        {imageSourse:(require('./image/1.png')),
        disc:'今日推荐',
        title:'天龙八部',
          playTimes:"30万"},
        {imageSourse:(require('./image/2.png')),
          disc:'今日推荐',
          title:'天龙八部',
          playTimes:"30万"},
        {imageSourse:(require('./image/3.png')),
          disc:'今日推荐',
          title:'天龙八部',
          playTimes:"30万"},
        {imageSourse:(require('./image/4.png')),
          disc:'今日推荐',
          title:'天龙八部',
          playTimes:"30万"},
        {imageSourse:(require('./image/5.png')),
          disc:'今日推荐',
          title:'天龙八部',
          playTimes:"30万"},
        {imageSourse:(require('./image/6.png')),
          disc:'今日推荐',
          title:'天龙八部',
          playTimes:"30万"}
      ]
    };

    return (
      <YoukuComponent dataSourse={dataSourse}/>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('youkuComponent', () => youkuComponent);

运行结果