react-native是面向組件的開發(fā)，基礎(chǔ)知識(shí)相對(duì)簡(jiǎn)單，我們只需先迅速掌握主干知識(shí)，在以后的開發(fā)中就有了開枝散葉的資本。

項(xiàng)目結(jié)構(gòu)

• 面向組件的開發(fā)，初始化工程內(nèi)容結(jié)構(gòu)

/**************組件導(dǎo)入**************/ 
import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Image,
    ImageBackground,
} from 'react-native';

/**************平臺(tái)區(qū)分 ios 和 android**************/ 
const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component<{}> {

/************渲染 相當(dāng)于viewDidload**************/
  render() {
/**返回顯示的內(nèi)容**/
    return (
      <View style={styles.container}>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
    );
  }
}

/************布局樣式************/
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },

  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

• 工程目錄介紹，新版入口已經(jīng)統(tǒng)一在index.js里面了

  
  
  image.png
  • GitHub如何運(yùn)行

  $npm install
  $react-native run-ios /react-native run-andriod
  

• 平常開發(fā)目錄結(jié)構(gòu)

.
├── andoird/    
├── ios/    
├── src/    // 項(xiàng)目頁(yè)面
│   ├── index.js        // 注冊(cè)原生應(yīng)用入口
│   ├── App.js          // 首頁(yè)
│   ├── components/     // 各類組件
│   ├── pages/          // 頁(yè)面
│   ├── images/         // 圖片
│   ├── config/         // 項(xiàng)目配置內(nèi)容
│   ├── logic/          // 項(xiàng)目邏輯
│   └── utils/          // 項(xiàng)目共計(jì)
└── network             // 網(wǎng)絡(luò)服務(wù)
    └── DataService.js
.
├── components    //組成應(yīng)用的各個(gè)組件
│   ├── Routers.android.js     //每個(gè)組件若實(shí)現(xiàn)不一樣，分為android的實(shí)現(xiàn)和ios的實(shí)現(xiàn)。
│   ├── Routers.ios.js
│   ├── common       //公共組件
│   ├── issues       //議題頁(yè)面
│   ├── navigation   //導(dǎo)航組件，android用側(cè)邊欄，ios準(zhǔn)備用tab
│   └── project      //項(xiàng)目頁(yè)面
└── network          //網(wǎng)絡(luò)服務(wù)
    └── DataService.js
根據(jù)項(xiàng)目具體內(nèi)容調(diào)節(jié)。。。

調(diào)試

• 模擬器調(diào)試
  • 數(shù)據(jù)刷新 iOS模擬器 command+R 刷新，command+D呼出操作菜單
    Android模擬器 RR刷新數(shù)據(jù)，點(diǎn)擊右側(cè)菜單按鈕呼出菜單
• 真機(jī)調(diào)試（電腦和手機(jī)設(shè)備在同一個(gè)Wifi網(wǎng)絡(luò)環(huán)境下）
  • iOS
    • 配置電腦的IP地址
      找到 RCTWebSocketExecutor.m 里面的 localhost 設(shè)置為你的電腦的IP地址
    • 修改Bundle ID : 不改很有可能報(bào)錯(cuò)!
    • Test 的Team也需要設(shè)置
    • 手機(jī)搖一搖呼出操作菜單
  • Android
    • 在開發(fā)者選項(xiàng)里打開USB調(diào)試
    • 在cmd命令行或Cygwin輸入adb devices就可以看到設(shè)備已連接
    • 運(yùn)行RN項(xiàng)目時(shí)，手機(jī)和電腦USB連接并且電腦和手機(jī)設(shè)備在同一個(gè)Wifi網(wǎng)絡(luò)環(huán)境下
    • 手機(jī)搖一搖呼出操作菜單

布局和樣式 （示例工程在末尾）

• 彈性（Flex）寬高

  • 最簡(jiǎn)單的給組件設(shè)定尺寸的方式就是在樣式中指定固定的width和height。React Native中的尺寸都是無(wú)單位的，表示的是與設(shè)備像素密度無(wú)關(guān)的邏輯像素點(diǎn)。（像素、物理像素、邏輯像素的關(guān)系看這里）
  • 在組件樣式中使用flex可以使其在可利用的空間中動(dòng)態(tài)地?cái)U(kuò)張或收縮。一般而言我們會(huì)使用flex:1來指定某個(gè)組件擴(kuò)張以撐滿所有剩余的空間。如果有多個(gè)并列的子組件使用了flex:1，則這些子組件會(huì)平分父容器中剩余的空間。如果這些并列的子組件的flex值不一樣，則誰(shuí)的值更大，誰(shuí)占據(jù)剩余空間的比例就更大（即占據(jù)剩余空間的比等于并列組件間flex值的比）。
  • 組件能夠撐滿剩余空間的前提是其父容器的尺寸不為零。如果父容器既沒有固定的width和height，也沒有設(shè)定flex，則父容器的尺寸為零。其子組件如果使用了flex，也是無(wú)法顯示的。

• Flexbox布局

  • Flex Direction
    在組件的style中指定flexDirection可以決定布局的主軸。子元素是應(yīng)該沿著水平軸(row)方向排列，還是沿著豎直軸(column)方向排列呢？默認(rèn)值是豎直軸(column)方向。

    
    
    
    

  • Justify Content
    

    在組件的style中指定justifyContent可以決定其子元素沿著主軸的排列方式。子元素是應(yīng)該靠近主軸的起始端還是末尾段分布呢？亦或應(yīng)該均勻分布？對(duì)應(yīng)的這些可選項(xiàng)有：flex-start、center、flex-end、space-around以及space-between。

  • Align Items
    在組件的style中指定alignItems可以決定其子元素沿著次軸（與主軸垂直的軸，比如若主軸方向?yàn)閞ow，則次軸方向?yàn)閏olumn）的排列方式。子元素是應(yīng)該靠近次軸的起始端還是末尾段分布呢？亦或應(yīng)該均勻分布？對(duì)應(yīng)的這些可選項(xiàng)有：flex-start、center、flex-end以及stretch。
    

    注意：要使stretch選項(xiàng)生效的話，子元素在次軸方向上不能有固定的尺寸。

• 界面樣式

/*******************內(nèi)聯(lián)************************/
<View style={{flex: 1, backgroundColor: 'powderblue'}} />

/*******************外聯(lián)************************/
<View style={styles.MyStyle}>
    <Text style={styles.instructions}>
       flexbox我是第一個(gè)View
    </Text>
</View>

// 樣式定義
const styles = StyleSheet.create({

   instructions: {
     textAlign: 'center',
     color: '#333333',
     marginBottom: 5,
   },// 不同樣式間逗號(hào)隔開
   MyStyle:{
       flex:1,
       backgroundColor:'red',
       flexDirection:'row', //主軸方向
       justifyContent:'space-around',// 主軸方向的對(duì)齊方式
       alignItems:'flex-end',// 次軸方向的對(duì)齊方式
   }
});

編寫各式各樣的UI

• 靜態(tài)界面
  Text、Image、View、props
• 登錄界面實(shí)戰(zhàn)練習(xí)(見下面示例工程)
• 動(dòng)態(tài)界面
  要學(xué)習(xí)如何動(dòng)態(tài)修改你的界面，那就需要進(jìn)一步
  學(xué)習(xí)State（狀態(tài)）的概念

分辨率

// 獲取屏幕寬高分辨率
var Dimensions = require('Dimensions');
let screenwidth  = Dimensions.get('window').width;
let screenheight = Dimensions.get('window').height;
let screenheight = Dimensions.get('window').scale;

iOS和Android區(qū)分

React Native提供了一個(gè)Platform模塊用于檢測(cè)當(dāng)前運(yùn)行app的平臺(tái)。你可以根據(jù)這個(gè)檢測(cè)邏輯去應(yīng)用對(duì)應(yīng)的針對(duì)特定平臺(tái)的代碼。

• Platform.OS
  如果一個(gè)組件中只有一小部分代碼是針對(duì)特定平臺(tái)的，可以使用這種方式。

import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  height: (Platform.OS === 'ios') ? 200 : 100,
});

• Platform.select（Platform.select方法的key（ios、android）對(duì)應(yīng)的value可以是任意的value）

import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    ...Platform.select({
      ios: {
        backgroundColor: 'red',
      },
      android: {
        backgroundColor: 'blue',
      },
    }),
  },
});

const Component = Platform.select({
  ios: () => require('ComponentIOS'),
  android: () => require('ComponentAndroid'),
})();

// 直接使用
<Component />;

• 針對(duì)特定平臺(tái)的文件擴(kuò)展名
  • 如果你針對(duì)特定平臺(tái)的代碼比較復(fù)雜的話，你應(yīng)該考慮將它們拆分到獨(dú)立的文件中。
  • 當(dāng)一個(gè)組件要加載的另外一個(gè)組件對(duì)應(yīng)的文件名有
    .ios.或.android.
    擴(kuò)展名時(shí)React Native會(huì)根據(jù)當(dāng)前所處平臺(tái)來加載對(duì)應(yīng)的文件。
  • 比如說，如果你的項(xiàng)目中有以下兩個(gè)文件：
    BigButton.ios.js
    BigButton.android.js
    然后你可以用下面這種方式去引入組件：
    const BigButton = require('./BigButton');
    這樣子，React Native就會(huì)根據(jù)當(dāng)前運(yùn)行app的平臺(tái)來自動(dòng)加載對(duì)應(yīng)的文件了。

react-native生命周期

export default class Test extends Component {
    state={
        title:'默認(rèn)值',
        person:'Hank'
    }
    static defaultProps={
        age:18
    }
    //
    render() {
        return (
            <View ref="topView" style={styles.container}>
                <Text>{this.state.person}</Text>
                <Text>{this.props.age}</Text>
                <Button title="我就是個(gè)Button"
                        color="red"
                        onPress={()=>this.click('點(diǎn)擊')}
                />
            </View>
        );
    }
    click(event){
        //
        this.setState({
            title:event
        });
        //拿到View
        console.log(this.refs.topView)
    }
        //相當(dāng)于OC中的ViewWillAppear
    componentWillMount(){
        //AlertIOS.alert('WillMount來了')
    }
    
    //哥么Render之后 -- 今后用來發(fā)送網(wǎng)絡(luò)請(qǐng)求(第一次加載的數(shù)據(jù))
    componentDidMount(){
        // AlertIOS.alert('DidMount')
    }

    //這個(gè)方法!!刷新UI之后調(diào)用!!!第一次加載UI不會(huì)來!!
    componentDidUpdate(){
        AlertIOS.alert('DidUpdate');
    }

    componentWillUnmount() {
        // 卸載界面
    }
    
    //當(dāng)組件傳入的 props 發(fā)生變化時(shí)調(diào)用，例如：父組件狀態(tài)改變，給子組件傳入了新的prop值。用于組件 props 變化后，更新state。
    componentWillReceiveProps(nextProps) {
    
    }
}
const btnClick = ()=>{
    AlertIOS.alert('哥么我來了!!')
}

示例Demo
運(yùn)行方式：$npm install $react-native run-ios