ReactNative basic - fantasy0107/notes GitHub Wiki

基本概念

State - 元件內部可以使用的變數
Props - component property 可以在元件內部被拿來使用
Style - 像 css
StyleSheet - 統一管理 css

1. 分離 UI
2. 樣式命名管理
3. 重用
4. 使用樣式表的 ID 來引用樣式 而不是每次產生新的 object 

Layout Props
FlexBox

可以用array map 去印出view

 { 
    SampleNameArray.map((item, key)=>(
         <Text key={key} style={styles.TextStyle} onPress={ this.SampleFunction.bind(this, item) }> { item } </Text>)
    )
}

ref 使用

// ref props 可以指定 component 
<TextInput
    ref={input => this.textInput = input}
    onSubmitEditing={this.onSubmitEditing.bind(this)
/>

使用 component 提供的 Methods
focus() {
    this.textInput.focus()
}

component 問題

當一個 Flatlist 用到相同 component ex:ItemComponent 時如果已經 load 一次那麼 constructor 就會跑一次 這時如果是用相同的 ItemComponent 那麼 constructor 不會觸發所以假設 props 接收 id 不同想要去改 constructor 中 state 的值可以用以下

componentDidUpdate(oldProps) {
    const newProps = this.props;
    if(oldProps.value1 !== newProps.value1) {
        this.setState({
            ....
        });
    }
}
⚠️ **GitHub.com Fallback** ⚠️