react-native基礎教程(1)

來源:互聯網
上載者:User

標籤:

轉載連結:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/react-native-foundation-course/

React-native是Facebook的開源項目,它的口號是"Learning once,write anywhere",目的是統一的View的編寫。

一、React-Native基本文法模板

‘use strict‘;  =====>(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; =====>(匯出組件,使能夠在別的組件中用)

二、React-native的 組件化,我們可以把你需要的分功能自訂米快寫代碼,然後把所有的模組組合起開,就是一個完整的程式(這樣子寫代碼看起比較清晰)

代碼如下所示:

‘use strict‘;

var React=require(‘react-native‘);

var {

AppRegistry,

StyleSheet,

Text,

View

}=React;

var FirstApp=React.createClass({

render:function(){

<View style={styles.container}>  

<HelloWorld myText=‘我是第一‘/>

<HelloWorld myText=‘我是第二‘/>==>(這裡引用了下一個組件,HelloWorld自動成為FiirstApp的子組件)

<HelloWorld myText=‘我是第三‘/>

</View>

 

}

 

});

var HelloWorld=React.createClass({

render:function(){

return (

<View>

<Text style={{fontSize:20,color:‘red‘}}>{this.props.myText}</Text>

=====>(從父組件傳過來的myText屬性,用this.props.myText接收) 

</View>

)

 

}

 

 

})

 

三、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‘);

    },

ender: 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;

 

 

react-native基礎教程(1)

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.