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

iOS啟動注意

在xcode項目代碼中AppDelegate.m會標識入口文件。例如：jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"]

閃屏界面在哪修改?

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

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

andriod的activity跳轉

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

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

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

react-native中的flex布局應用的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"
    }
});

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

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

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

flexWrap屬性值：
wrap,nowrap

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

alignSelf橫向對其方式：
flex-start,flex-end,center, stretch

justifyContent縱向對其方式：
flex-strat,flex-end,center,space-between,space-around

和普通的css不一樣的地方

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

應用于組件的style屬性上的樣式，可以不止一個，可以使用多個，以逗號分隔。如 style={styles.a, styles.b}

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

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  // 上下外留白的簡寫，如果marginTop和marginBottom一樣。
marginHorizontal // 左右外留白的簡寫
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，就是絕對定位時覆蓋順序，也會在元素上產(chǎn)生一個陰影。

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的設置，需要考慮到內(nèi)層元素的位置。

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

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

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

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

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

RN的字號是沒有設置單位的，所以會隨著系統(tǒng)設置的字體大小而變化。

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

RN沒有寬高100%的設置，所以如果需要讓元素撐滿屏幕 ：

jsx語法

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

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

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

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

多個樣式表:{[樣式類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 (
            
                當前狀態(tài)是：{this.state.name}
            
        );
    }
}

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

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中，引用全局對象可以使用window或者global，它們都指向一個對象 -- DedicatedWorkerGlobalScope,,其中有jscore提供的方法，也有RN注入的方法.

Props屬性
設置：在應用組件上傳遞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，然后再需要修改時調(diào)用setState方法。

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

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