reactNative中的props和state傳值
reactNative項目由不同的組件組成，每個組件都有state和props，
組件內部傳值可以通過state和props傳值，外部調用向組件傳值需通過
props進行傳值。
案例實現：實現一個動畫效果，打開網頁，文字從左向右平移200px;
代碼實現:
01.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="react-with-addons.js"></script>
<script src="babel.min.js"></script>
<script type="text/babel" src="01.js"></script>
<style type="text/css">
</style>
<title>React</title>
</head>
<body>
</body>
</html>
01.js:
let MyComponent=React.createClass({
//默認熟悉，通過屬性配置動畫
getDefaultProps:function(){
return{
position:100;//px 平移的距離
time:10 //ms頻率,10ms移動一次
};
},
getIniniaState:function(){
return {position:0};
},
render:function(){
let style={
marginLeft:this.state.position
};
return <div style={style}>This will animated</div>
},
});
//動畫執行過程,不斷改變狀態
transformComponent:function(){
if(this.state.position<this.props.position){
//state改變后重新渲染頁面
this.setState({
postion:++this.state.position
});
}else{
//完成動畫,取消定時器
clearInterval(this.timer);
}
}
//真實的DOM被渲染出來后調用
componentDidMount:function(){
if(this.props.position){
this.timer=setInterval(this.transformComponent,this.props.time);
}
}
ReactDOM.render(<MyComponent postion={200} time={5} />,document.body);