reactNative小demo讲解 对比iOS

我们通过http://reactnative.cn(reactNative中文网)安装reachNative环境，创建xcode工程。

结构分析

 1.引入相关的类 

import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
} from 'react-native';

对比iOS的

#import "AppDelegate.h"

2.类的主题

class AwesomeProject extends Component {

}

对比iOS的

@implementation 

@end

3.界面渲染方法

render() {}

对比iOS的

-(void)viewDidLoad{}

4.自定义方法

customPressHandler = () =>
{
//自定义方法,使用属性来定义
  alert('你按下了按钮,当前的状态是'+this.state.states);

};

对比iOS的，自己封装的方法，不做举例了

5.构造方法

//构造
constructor(props)
{
  super(props);
//  初始状态
  this.state = {states:1};

}

对比iOS的，初始化方法执行在render（）之前

6.调用 这个类

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

对比iOS的，

int main(int argc, char * argv[]) {

  @autoreleasepool {

    return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));

  }

}

7.样式

const styles = StyleSheet.create({}）

对比ios的，所有改变控件颜色，大小，字体，等UI方法

8可以封装一些控件例如button

代码示例

/**
 * 郝建明 20160329
 */

import React, {
    StyleSheet,
    Component ,
    Text,
    View,
    TouchableOpacity
} from 'react-native';

 export default class Button extends Component {
    //构造
    constructor(props)
    {
        super(props);
        //  初始状态
        this.state= {
            disabled:false,

        };

    }
    customPressHandler = () =>
{
// const {dianjishijian} = this.props;
//     dianjishijian();
        this.disable();
        const {onPress} =this.props;
        onPress(this.enable);
}
     enable = () =>
     {
         this.setState({
         disabled:false,
         })
     }
     disable = () =>
     {
         this.setState({
             disabled:true,
         })
     }

render() {
    //解构 一次取出多个属性
    const {text,beijingse } =this.props;
    //基本等于
    // const text = this.props.text;
    return (
        <View style={styles.container}>

    <TouchableOpacity
        disabled = {this.state.disabled}
        style = {[styles.button,{backgroundColor:beijingse} ,this.state.disabled && styles.disabled]}
     onPress = {this.customPressHandler}
>
<Text
    style={styles.buttonText}
>{this.props.text}</Text>
    </TouchableOpacity>
    </View>
);
}
}

const styles = StyleSheet.create({
    button:
    {
        //   按钮的高度
        height:40,
        //按钮的宽度
        width:100,
        //按钮的圆角
        borderRadius:20,
        //按钮的背景颜色
        backgroundColor:'green',
        justifyContent:'center',
        overflow:'hidden'
    },
    buttonText:{

        textAlign:'center',
        color:'white'
    },
    disabled:
    {
        backgroundColor:'gray'
    }
});

上述对比只是我作为初学者的感觉。类比的有错误的请多多指教，谢谢！