我们通过http://reactnative.cn(reactNative中文网)安装reachNative环境,创建xcode工程。
结构分析
1.引入相关的类
import React, { AppRegistry, Component, StyleSheet, Text, View, TouchableOpacity, } from 'react-native';
对比iOS的2.类的主题#import "AppDelegate.h"
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}; }6.调用 这个类对比iOS的,初始化方法执行在render()之前
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' } });上述对比只是我作为初学者的感觉。类比的有错误的请多多指教,谢谢!