摘要：系統(tǒng)存在啟動(dòng)魚銷毀一個(gè)的一條有序的回調(diào)函數(shù)。一個(gè)，繼承子所在應(yīng)用進(jìn)程的窗口管理器有一個(gè)主要用來(lái)管理窗口的一些狀態(tài)，屬性，增加，刪除，更新，窗口順序，消息收集和處理等。通過(guò)接口與全局窗口管理器進(jìn)行交互界面控制和消息響應(yīng)。

iOS啟動(dòng)注意

在xcode項(xiàng)目代碼中AppDelegate.m會(huì)標(biāo)識(shí)入口文件。例如：jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"]

閃屏界面在哪修改?

xcode項(xiàng)目中找到LaunchScreen.xib文件，就是啟動(dòng)界面。手動(dòng)添加組件或修改文本即可。

文本編輯器打開index.ios.js文件，是js代碼的入口文件，所有的代碼編寫從這開始，可以定義自己的模塊和引入第三方模塊。

andriod的activity跳轉(zhuǎn)

兩個(gè)activity之間的跳轉(zhuǎn)。
android中有一個(gè)比較重要的組件--activity，是用于顯示View的。
比如：利用react創(chuàng)建簡(jiǎn)單的app，當(dāng)一開打開app的時(shí)候，其實(shí)就進(jìn)入了一個(gè)主的activity，由其渲染主界面（activity可以簡(jiǎn)單理解為瀏覽器的tab）。

andriod系統(tǒng)根據(jù)生命周期的不同階段喚起對(duì)應(yīng)的回調(diào)函數(shù)來(lái)執(zhí)行代碼。系統(tǒng)存在啟動(dòng)魚銷毀一個(gè)activity的一條有序的回調(diào)函數(shù)。

Acitivity: Activity包含一個(gè)Window，改window在Acitivity的attach方法中調(diào)用PolicyManager.makeNewWindow創(chuàng)建。
View：最基本的UI組件，表示屏幕上的一個(gè)矩形區(qū)域。
DecorView：是Window中的View的RootView，設(shè)置窗口屬性。
Window：表示頂層窗口，管理界面的顯示和事件的相應(yīng)。每個(gè)Activity均會(huì)創(chuàng)建一個(gè)PhoneWinodw對(duì)象，是Activity和整個(gè)View系統(tǒng)交互的接口。
WIndowManager: 一個(gè)interface，繼承子ViewManager.所在應(yīng)用進(jìn)程的窗口管理器；有一個(gè)implementtation WindowManagerImpl；主要用來(lái)管理窗口的一些狀態(tài)，屬性，view增加，刪除，更新，窗口順序，消息收集和處理等。
ViewRoot：通過(guò)IWindowSession 接口與全局窗口管理器進(jìn)行交互：界面控制和消息響應(yīng)。
ActivityThread：應(yīng)用程序的主線程，其中會(huì)創(chuàng)建關(guān)聯(lián)當(dāng)前Activity于Window；創(chuàng)建WindowManager實(shí)現(xiàn)雷實(shí)例，把當(dāng)前DecoView加入到WindowManager

react-native中的flex布局應(yīng)用的6的屬性

var Text = React.createClass({
    render() {
        return (
            
                
                
                
            
        );
    }
});


var styles = StyleSheet.create({
    style_0: {
        flex: 1,
    },
    style_1: {
        flex: 5,
        height: 40,
        borderWidth: 1,
        borderColor: "red"
    }
});

當(dāng)一個(gè)組件(元素)，定義了flex屬性時(shí)，表示改元素是可伸縮的。
flex的屬性值是大于0的時(shí)候伸縮，其小余和等于0的時(shí)候不伸縮，例如：flex: 0, flex: -1.

代碼中：最外層的View是可伸縮的，因?yàn)闆](méi)有兄弟節(jié)點(diǎn)和它占空間，占滿全屏。里層是3個(gè)View，可以看到三個(gè)View的flex屬性加起來(lái)是5+5+10 = 20.所以第一個(gè)View和第二個(gè)View分別占1/4伸縮空間，最后一個(gè)View占據(jù)1/2空間。

屬性值：row, column
flexDirecation在React-Native只有兩個(gè)屬性: row(橫向伸縮) ，column(縱向伸縮)

flexWrap屬性值：
wrap,nowrap

alignItems屬性值：
flex-start,flex-end,center,stretch

alignSelf橫向?qū)ζ浞绞剑?br>flex-start,flex-end,center, stretch

justifyContent縱向?qū)ζ浞绞剑?br>flex-strat,flex-end,center,space-between,space-around

和普通的css不一樣的地方

RN樣式的屬性名，需要使用駝峰式

應(yīng)用于組件的style屬性上的樣式，可以不止一個(gè)，可以使用多個(gè)，以逗號(hào)分隔。如 style={styles.a, styles.b}

可以在樣式中使用變量.
例如：需要一個(gè)元素的寬度等于屏幕的寬度。

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDireaction: "column",
        width: Dimensions.get("window").width
    }
});

position
top
left
bottom
right

RN是border-box模型

width
height
margin
padding
border
flex系列

marginVertical  // 上下外留白的簡(jiǎn)寫，如果marginTop和marginBottom一樣。
marginHorizontal // 左右外留白的簡(jiǎn)寫
paddingVertial
paddingHorizontal

backgroundColor
backgroundVisibility

color
fontFamily
fontSize
fontStyle
fontWeight
textAlign
textDecorationColor
textDecorationLine
textDecorationStyle
letterSpacing
lineHeight

shadowColor 陰影色iOS only
shadowOffset 陰影距離iOS only
shadowOpaicty 陰影透明度iOS only
shadowRadius 陰影半徑 iOS only
elevation 仰角 android only // 這是屬性影響著元素的z-index，就是絕對(duì)定位時(shí)覆蓋順序，也會(huì)在元素上產(chǎn)生一個(gè)陰影。

opacity
overflow
resizeMode
rotation
scaleX
scaleY
transform
transformMatrix
translateX
translateY
writingDirection

constructor(props) {
    super(props);    
    this.state = { text: "" }
}

render() {
    return (
        
             this.setStatet({text: textCount})} />
            
                {this.state.text.split(" ").map((word) => word && "aaa").join()}
            
        
    );
}

react-native布局的一些坑

不存在zIndex，后面的元素覆蓋前面的元素。

內(nèi)層元素覆蓋外層元素。

borderRadius的設(shè)置，需要考慮到內(nèi)層元素的位置。

flex為0,系統(tǒng)不會(huì)自動(dòng)計(jì)算寬高。

View內(nèi)部的元素不要超出父級(jí)的范圍，iOS問(wèn)題不大，andriod上就什么超出的都看不到了。

lineHeight可以用，不過(guò)不要寫成小數(shù)，否則andriod上會(huì)直接崩潰。

RN的樣式不存在繼承的情況，所以基本上的每個(gè)節(jié)點(diǎn)都要寫style。 （Text相關(guān)樣式除外，Text嵌套的話，其文字屬性也會(huì)應(yīng)用于子元素）

如果Text的父級(jí)元素設(shè)置了背景顏色，那么iOS下Text的背景顏色也是父級(jí)的背景顏色，那么自己寫Text重置下樣式，那么就遇到了再改。

RN的字號(hào)是沒(méi)有設(shè)置單位的，所以會(huì)隨著系統(tǒng)設(shè)置的字體大小而變化。

RN的樣式中的width/height的單位是DP

RN沒(méi)有寬高100%的設(shè)置，所以如果需要讓元素?fù)螡M屏幕 ：

jsx語(yǔ)法

componentWillMount：組件創(chuàng)建之前
getInitialState：初始化狀態(tài)
render：渲染視圖
componentDidMount：渲染視圖完成后
componentWillUnmount：組件被卸載之前

普通內(nèi)聯(lián)樣式:{{}},第一層｛｝是表達(dá)式，第二層｛｝是js對(duì)象；

調(diào)用樣式表:{樣式類.屬性}

樣式表和內(nèi)聯(lián)樣式共存:{[]}

多個(gè)樣式表:{[樣式類1， 樣式類2]}

Recat.createClass({
    getDefaultProps() {
        return {
            sign: "正在加載..."
        }
    }
});

class TestReact extends Component {
    construcotr(props) {
        super(props);
        this.state = {
            name: "a"
        }
    }
    changeState() {
        this.setState({
            name: "b"
        });
    }
    render() {
        return (
            
                當(dāng)前狀態(tài)是：{this.state.name}
            
        );
    }
}

把TouchEnd事件綁定在最外層View上。
注意：事件觸發(fā)函數(shù)的上下文，默認(rèn)就是本組件。 changeState中的this，就是指代的就是TestReact的實(shí)例.

refs屬性

class TestReact extends Component {
    getPos() {
        this.res.position.measure((fx, fy, width, height, px, py) => {
            console.log("位置：", "x:", fx, "y:", fy);        
        });
    }
    render() {
        return (
            
                位置
            
        );
    }
}

在RN中，引用全局對(duì)象可以使用window或者global，它們都指向一個(gè)對(duì)象 -- DedicatedWorkerGlobalScope,,其中有jscore提供的方法，也有RN注入的方法.

Props屬性
設(shè)置：在應(yīng)用組件上傳遞key=val
獲取：this.props.key

class Test exntds Compontent {
    render() {
        return (
            
                HELLO {this.props.name}
            
        );
    }
}

export default class FirstApp extned Componet {
    render() {
        return {
            
                
                
                    
            
        }
    }
}

在constructor中初始化state，然后再需要修改時(shí)調(diào)用setState方法。

設(shè)置：this.setState({key: val})
獲取：this.state.key

constructor(props) {
    super(props);
    this.state = {
        count: 0
    }
}
doUpdateCount() {
    this.setState({count: this.state.count + 1});
}