React Native学习之自定义一个组件

在React中一个组件我们可以理解为一个View

下面介绍如何自定义并使用一个组件

首先我们创建一个组件文件
ComponentExample.js

'use strict';

var React = require('react-native');
var {
  View,
} = React;
var ComponentExample = React.createClass({
    render:function()
    {
      var context = {msg: "Hello"};
      return(
        <View style={{backgroundColor:'blue',height:300}}>
          <View style = {{marginLeft:40, marginTop:40, width:60,height:60,backgroundColor:'red'}}>
          </View>
          <View style = {{marginLeft:40, marginTop:10,width:60,height:60,backgroundColor:'yellow'}}>
          </View>
        </View>
      );
    }

});
module.exports = ComponentExample;

该组件定义了三个视图，背景色分别为blue，red，yellow。其中blue是父视图，red和yellow都是blue的子视图。
注意：如果想要固定父视图的高度建议不使用padding布局

index.ios.js

'use strict';

var React = require('react-native');
var {
  Text,
  View,
} = React;

var ComponentExample = require('./components/ComponentExample');
var styles = React.StyleSheet.create({
  container:{
    padding:30,
    marginTop:0,
    borderColor:'#e7e7e7',
  }
})

var AwesomeProject = React.createClass({
    render:function()
    {
      var context = {msg: "Hello"};
      return(
          <ComponentExample />
      );
    }

});
React.AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

首先我们需要引用ComponentExample

var ComponentExample = require('./components/ComponentExample');

render 里面直接返回

<ComponentExample />

注意：对组件设置style是没有什么效果的