React Native的使用

React Native的使用

在這裏使用的是ECMA2015(ES6)語法，若是不瞭解的小夥伴，阮一峯的ES6很不錯，瞭解下http://es6.ruanyifeng.com/#README。在使用RN寫項目時，打開index.android.js，首先要引入react中的component這個組件，而後引入react native中要使用的組件，下面要使用什麼組件，在最上方就要把它引入進去，不然會報錯，如代碼下的圖一

import React, { Component } from 'react';
import {
AppRegistry,   //註冊，注意，每一個組件中間的逗號是英文的「,」
View,     //視圖組件
Text,     //文本組件
StyleSheet,   //樣式，實例化建立樣式
TextInput,    //輸入框
Image,    //圖片組件 
} from 'react-native';

圖一

因此在使用的時候，要先引入在去使用！！！
RN是面向組件開發，任何一個類，經過註冊就能夠成爲一個組件
AppRegistry是JS運行全部React Native應用的入口。應用的根組件應當經過AppRegistry.registerComponent方法註冊本身，而後原生系統才能夠加載應用的代碼包而且在啓動完成以後經過調用AppRegistry.runApplication來真正運行應用。

class App extends Component{ 
 
      //這個Demo是經過Component繼承下來的 
   //初始化方法-->返回具體組件內容，內容和結構，後期會有生命週期的函數（方法），在不一樣的時候作不一樣的事情
  render() {  
      //返回
     return (
            <View style={styles.container}>
                <Text style={styles.title}>你好看，世界纔好看！</Text>   
            </View>
        );
  }
}
//樣式的設置
var styles = StyleSheet.create({   //樣式中的變量都是包含在"{}"中，是樣式類
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f7f7f7',
  },
  title: {
    color:'#1f1a16',
    fontSize:36,
  }
});
//註冊輸出
AppRegistry.registerComponent('App', () => App);

在寫文字的時候必需要寫<Text></Text>,使用這個包裹，若是直接寫<View style={styles.container}>
你好,世界
</View>會報錯，以下，
圖二

補充一點，在建立組件的時候也能夠寫直接向外暴露出這個類export default class FriendPage extends Component {}，後面就能夠不寫AppRegistry.registerComponent('App', () => App);

這樣，一個簡單的demo就出來了。

本文同步分享在 博客「zoepriselife316」（CSDN）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。