React Native基礎概念和基礎認識

標籤：

  當我們初始化一個RN項目的時候主要的是index.ios.js檔案和index.android.js檔案 
然後還包括和一些依賴（什麼是依賴？就比如說你使用jquery就要下載這個jquery.js一樣，這個被稱為依賴）和原生的ios項目工程檔案夾
和原生的的Android原生檔案夾，當然我們的編輯在index.ios.js（Android）等（一般情況下不需要動原生的項目工程）。
ok！下面我們開始進入index.ios.js檔案
 首先：我們引入react模組（相當於各種組件的集合以及其他東東）

import React,{Component}from ‘react‘;

　　

然後是引入當前檔案所要使用的組件

import {  NavigatorIOS,   AppRegistry,   StyleSheet,   View} from ‘react-native‘;

其實，這隻是一個文法糖而已，比如AppRegistry我們可以這樣定義：var AppRegistry = React.AppRegistry;

　　然後是定義一個組件 作為介面

 構建組件入口。裡面的render方法就是渲染視圖用的。return返回的是視圖的模板代碼。其實這是JSX的模板文法，
組件定義好了就可以給組件添加相應的樣式，採用

var xxx=StyleSheet.create({.......})

　　然後被引用：

<View style={{}}></View> <View style={xxx.name}></View>

　　好了 一個初始化的介面的代碼基本上都如上 那麼接下來可以進行開發了

     但是在開發之前~我們得有如下的基本基礎：

     Node.js基礎（es6）

     JSX文法基礎

    Flexbox布局

三、目前需要關注的檔案

1、目前階段有幾個檔案時需要注意下的：（1）在xcode項目代碼中AppDelegate.m會標識入口檔案，例如：（伺服器）jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];如果是網上下載別人的源碼，注意此處的ip和連接埠是否有被修改。（2）閃屏介面在哪修改？在xcode項目中找到LaunchScreen.xib檔案，點擊，你會看到介面，這個就是啟動介面，你手動添加組件或者修改文本即可，最好瞭解下xcode的使用。（3）文字編輯器開啟index.ios.js檔案，是js代碼的入口檔案，所有的代碼編寫從這開始，可以定義自己的模組和引入第三方模組。
四：其他：

 <Image style={styles.pic} source={{uri: ‘https://avatars3.githubusercontent.com/u/6133685?v=3&s=460‘}}>

其中，Image標籤的source的第一個大括弧是模板，第二個大括弧是js對象，js對象裡面有個key是uri,表示圖片的地址。

React Native基礎概念和基礎認識