React-Native

安裝

iOS啓動注意

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

2. 閃屏界面在哪修改?

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

3. 文本編輯器打開index.ios.js文件，是js代碼的入口文件，全部的代碼編寫從這開始，能夠定義本身的模塊和引入第三方模塊。

原生知識點

andriod的activity跳轉

兩個activity之間的跳轉。
android中有一個比較重要的組件--activity，是用於顯示View的。
好比：利用react建立簡單的app，當一開打開app的時候，其實就進入了一個主的activity，由其渲染主界面（activity能夠簡單理解爲瀏覽器的tab）。

andriod系統根據生命週期的不一樣階段喚起對應的回調函數來執行代碼。系統存在啓動魚銷燬一個activity的一條有序的回調函數。

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

flex佈局

react-native中的flex佈局應用的6的屬性

flex

var Text = React.createClass({
    render() {
        return (
            <View style={styles.style_0}>
                <View style={styles.style_1}></View>
                <View style={styles.style_1}></View>
                <View style={{flex: 10}}></View>
            </View>
        );
    }
});


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是可伸縮的，由於沒有兄弟節點和它佔空間，佔滿全屏。裏層是3個View，能夠看到三個View的flex屬性加起來是5+5+10 = 20.因此第一個View和第二個View分別佔1/4伸縮空間，最後一個View佔據1/2空間。

flexDireaction

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

flexWrap

flexWrap屬性值：
wrap,nowrap

alignItems

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

alignSelf

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

justifyContent

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

樣式

和普通的css不同的地方

1. RN樣式的屬性名，須要使用駝峯式

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

3. 能夠在樣式中使用變量.
   例如：須要一個元素的寬度等於屏幕的寬度。

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，就是絕對定位時覆蓋順序，也會在元素上產生一個陰影。

其它

opacity
overflow
resizeMode
rotation
scaleX
scaleY
transform
transformMatrix
translateX
translateY
writingDirection

文本輸入

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

render() {
    return (
        <View style={{padding: 10}}>
            <TextInput style={{height: 40}} placeholder="transilate!" onChangeTex={(textCont) => this.setStatet({text: textCount})} />
            <Text style={{padding: 10, fontSize: 40}}>
                {this.state.text.split(' ').map((word) => word && 'aaa').join()}
            </Text>
        </View>
    );
}

react-native佈局的一些坑

1. 不存在zIndex，後面的元素覆蓋前面的元素。

2. 內層元素覆蓋外層元素。

3. borderRadius的設置，須要考慮到內層元素的位置。

4. flex爲0,系統不會自動計算寬高。

5. View內部的元素不要超出父級的範圍，iOS問題不大，andriod上就什麼超出的都看不到了。

6. lineHeight能夠用，不過不要寫成小數，不然andriod上會直接崩潰。

7. RN的樣式不存在繼承的狀況，因此基本上的每一個節點都要寫style。 （Text相關樣式除外，Text嵌套的話，其文字屬性也會應用於子元素）

8. 若是Text的父級元素設置了背景顏色，那麼iOS下Text的背景顏色也是父級的背景顏色，那麼本身寫Text重置下樣式，那麼就遇到了再改。

9. RN的字號是沒有設置單位的，因此會隨着系統設置的字體大小而變化。

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

11. RN沒有寬高100%的設置，因此若是須要讓元素撐滿屏幕 ：<View style={{width: Dimensions.get('window').width,height: Dimensions.get('window').height}} />

react語法

jsx語法

生命週期

componentWillMount：組件建立以前
getInitialState：初始化狀態
render：渲染視圖
componentDidMount：渲染視圖完成後
componentWillUnmount：組件被卸載以前

樣式解析

1. 普通內聯樣式:{{}},第一層｛｝是表達式，第二層｛｝是js對象；

   <View style={{fontSize:40, width:80,}}> </View>

2. 調用樣式表:{樣式類.屬性}

   <View style={styles.container}></View>

3. 樣式表和內聯樣式共存:{[]}

   <View style={[styles.container, {fontSize:40, width:80}]}>

4. 多個樣式表:{[樣式類1， 樣式類2]}

   <View style={[styles.container, styles.color]}>

設置屬性默認值

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

事件綁定

class TestReact extends Component {
    construcotr(props) {
        super(props);
        this.state = {
            name: 'a'
        }
    }
    changeState() {
        this.setState({
            name: 'b'
        });
    }
    render() {
        return (
            <View onToucheEnd={this.changeState}>
                <Text>當前狀態是：{this.state.name}</Text>
            </View>
        );
    }
}

把TouchEnd事件綁定在最外層View上。
注意：事件觸發函數的上下文，默認就是本組件。 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 (
            <View onTouechEnd={this.getPos}>
                <Text ref={"position"}>位置</Text>
            </View>
        );
    }
}

全局對象

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

props

Props屬性
設置：在應用組件上傳遞key=val
獲取：this.props.key

class Test exntds Compontent {
    render() {
        return (
            <View>
                <Text>HELLO {this.props.name}</Text>
            </View>
        );
    }
}

export default class FirstApp extned Componet {
    render() {
        return {
            <View style="{{alignItems: 'center'}}">
                <Test name='react' />
                <Test name='react-native' />
                <Test name='android' />    
            </View>
        }
    }
}

state

在constructor中初始化state，而後再須要修改時調用setState方法。

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

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