React Native基础教程

　　React Native是Facebook开源的框架，用来写Android和iOS移动App。它的口号是 “Learning once, write anywhere”，目的是统一View的编写。我个人也是由于公司需要，故入坑学习，下面就我的理解简单总结下React Native的基本知识。

　　需要的预备知识：

　　　　1、学习JavaScript(最新JS核心标准ES6)

　　　　2、简单学习React.js(开发网页)

　　　　3、学习JSX(HTML和JavaScript的混写)

　

　　我主要讲一下几个方面：

　　　　1、React Native的基本模板写法

　　　　2、React Native的Flexbox布局

　　　　3、React Native组件化

　　　　4、React Native的生命周期

　　　　5、React Native的数据状态引用

　　1、React Native的基本模板写法

'use strict';  =====>（严格模式）

var React = require('react-native');   =====>(导入模块react-native，关键字是： require)
 var {
AppRegistry,
StyleSheet,     =====>(声明要用到得系统组件)
   Text,
View,
} = React;

var FirstApp = React.createClass({   =====>(创建组件名称是：FirstApp， 关键字是createClass)

render: function() {   =====>(渲染方法， 组件中必须得方法)

return (

<View style={styles.container}>　　　　　　　　　　　　　　　　　　　　　　　　=====>(这几行就是JSX语法写的)
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
<Text style={{fontSize: 18}}>这是我的第一个React Native APP</Text>   =====>(显示在手机屏幕上的内容在这写)

</View>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　=====>（这里用view包起来，而不是用div）
);
}
});

var styles = StyleSheet.create( =====>(创建样式，看上面加粗划线的代码，可以在这里定义，也可以直接写在代码里面，如上面的fontSize:18)
   container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'orange'
}
});

AppRegistry.registerComponent('FirstApp', () => FirstApp);   =====>(注册应用，使能够加载运行, FirstApp就是你的App名称)

module.exports = FirstApp; =====>(导出组件，使能够在别的组件中用)

　　最终的打印结果：

　　

　　

　　2、React Native的Flexbox布局（样式）

　　官网的链接：http://facebook.github.io/react-native/docs/flexbox.html#content

　　这个比较简单，需自己多实践就行，简单说几个：

　　flex: 这个是一个灵活的布局属性，类似比例， 比如你想在一行中定义三张图片，它们的宽比为1：3：2，那么你可以分别设置它们的flex为: 1，3，2

　　flexDirection: 这个是设置布局的方向（column 和 row）, 视图排列方法是列布局还是行布局

　　justifyContent 和 alignItems: 这2个是水平和垂直布局，可以设置水平居中，垂直居中等

　　margin(包括marginLeft, marginRight, marginTop, marginBottom) :这个是设置间距（距离左，右， 上， 下）多少

　　position (包括absolute和relative): 这个是设置视图的位置是固定的还是相对的

　　　　......

　　3、React Native的组件化， 我们可以分功能来自定义模块写代码，然后把所有模块组合起来，就是一个完整的程序了

'use strict';

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

var FirstApp = React.createClass({

render: function() {

return (

<View style={styles.container}>

<HelloWorld myText='我是第一' />
<HelloWorld myText='我是第二' />   =====>(这里三个是引用了下面定义的组件，HelloWorld自动成为FirstApp的子组件)
<HelloWorld myText='我是第三' />　 =====>(myText是传给HelloWorld的属性)

</View>
);
}
});

var HelloWorld = React.createClass({

render: function() {

return (

<View>
<Text style={{fontSize: 20, color: 'red'}}>{this.props.myText}</Text>
</View>　　　　　　　　　　　　　　　　　　　　=====>(从父组件传过来的myText属性，用this.props.myText接收)
);
}
});

　　最终的打印结果：

　　


　　

　　4、React Native的生命周期

　　a、getInitialState: 在组建被挂载之前调用，我们一般在里面定义初始state值

　　b、getDefaultProps: 在组件类创建的时候调用一次，然后返回值被缓存下来。如果父组件没有指定 getDefaultProps 中定义的属性，则此处返回的对象中的相应属性将会合并到

this.props

　　c、componentWillMount: 服务器端和客户端都只调用一次，在初始化渲染执行之前立刻调用

　　d、render: 执行视图的渲染操作

　　e、componentDidMount: 在初始化渲染执行之后立刻调用一次，仅客户端有效（服务器端不会调用）

　　f、componentWillUnmount: 组件从DOM中移除时调用，一般在次方法进行必要的清理工作

'use strict';

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

var FirstApp = React.createClass({

getDefaultProps: function() {

console.log('getDefaultProps');

},

getInitialState: function() {

console.log('getInitialState');

return {

};
},

componentWillMount: function() {

console.log('componentWillMount');
},

componentDidMount: function() {

console.log('componentDidMount');
},

componentWillUnmount: function() {

console.log('componentWillUnmount');
},

render: function() {

console.log('render');

return (

<View style={styles.container}>

<HelloWorld myText='我是第一' />
<HelloWorld myText='我是第二' />
<HelloWorld myText='我是第三' />

</View>
);
}
});

var HelloWorld = React.createClass({

render: function() {

return (

<View>
<Text style={{fontSize: 20, color: 'red'}}>{this.props.myText}</Text>
</View>
);
}
});

var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'orange'
}
});

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

module.exports = FirstApp;

　　　最终的打印结果（执行顺序）：



　　5、React Native的数据状态引用

　　a、props: 属性， 用于不同组件之间数值传递，一般是从父组件中传值给子组件，子组件最好不要修改此值，而由父组件来修改，进而更新子组件的值

　　还是上面的栗子：

'use strict';

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

var FirstApp = React.createClass({

render: function() {

console.log('render');

return (

<View style={styles.container}>

<HelloWorld myText='我是第一' />
<HelloWorld myText='我是第二' />  =====>(HelloWorld嵌套在FirstApp中，所以HelloWorld自动成为了FirstApp的子组　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　件，myText就是要传递给子组件的属性值)
<HelloWorld myText='我是第三' />

</View>
);
}
});

var HelloWorld = React.createClass({

render: function() {

return (

<View>
<Text style={{fontSize: 20, color: 'red'}}>{this.props.myText}</Text> =====>(HelloWorld通过props来接收传　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　过来的myText属性值)
</View>
);
}
});

var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'orange'
}
});

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

module.exports = FirstApp;

　　最终的打印结果：

　　


　　b、state: 状态，用于同一组件中数据的更新

'use strict';

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

var FirstApp = React.createClass({

getInitialState: function() {

return {
myValue: '我是初始值'    =====>(设置初始值)
};

},

render: function() {

console.log('render');

return (

<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text onPress={this.changeText}  =====>(设置文字点击事件，当点击的时候会调用changeText方法)
                       style={{fontSize: 30,
color: 'orange',       =====>(设置文字样式)
                               textAlign: 'center'}}>

{this.state.myValue}   =====>(第一次加载数据的时候会获取初始值，用state来获取到初始值)
                 </Text>
</View>
);
},

changeText: function() {

this.setState({     =====>(这是文字的点击事件， 当我想要更改state初始值的时候，需要用到setState来更改)

myValue: '我是修改后的值'  =====>(修改初始值myValue，当我修改这里后，系统会自动去调用render函数方法，this.state.myValue会自动更新成最新的值，即：我是修改后的值)
})
}
});

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

module.exports = FirstApp;

　　最终的打印结果：

　　




　　c、ref: 用来指示render中某组件，调用的话就是this.refs.xxx.xxx

'use strict';

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

var FirstApp = React.createClass({

render: function() {

console.log('render');

return (

<View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'yellow'}}>

<Image
ref='myImg'
source={{uri: 'http://pic14.nipic.com/20110522/7411759_164157418126_2.jpg' }}
style={{width: 350, height: 350}} />    =====>(设置一张图片，并且设置宽高为350)

<Text onPress={this.changePic} style={{marginTop: 50}}>改变图片的大小</Text> ===>(点击文字，触发事件changePic)
</View>
);
},

changePic: function() {  =====>(点击文字会调用这个方法)

console.log('我打印出上面的image的属性来看看：',this.refs.myImg.props); =====>(打印出上面的Image来看看)
     }
});

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

module.exports = FirstApp;

　　最终的执行结果：