其它

flex

React Native 預設就是用 flexbox 佈局,不用設定 display:flex 。

flexbox 樣式屬性:

  • flexDirection 元件的排列方式

    • column(預設)

    • column-reverse

    • row

    • row-reverse

  • flexWrap 子元件超過父元件是否換行

    • nowrap(預設)

    • wrap

    • wrap-reverse

  • justifyContent 主軸對齊

    • flex-start 靠左

    • flex-end 靠右

    • center 置中

    • space-between 兩端分散對齊

    • space-around 比例分散對齊

  • alignItems 交叉軸對齊

    • flex-start 靠左

    • flex-end 靠右

    • center 置中

    • baseline 依基準線排列

    • stretch 高度填滿

  • alignSelf 針對指定元素對齊

    • auto 自動

    • flex-start 靠左

    • flex-end 靠右

    • center 置中

    • stretch 高度填滿

  • flex 子組件佔父組件的空間比例(一定是整數)

    多個子組件的flex值加總,再按比例分配。

    例:架構內有二個元件,分別是flex: 1 flex: 2,表示元件第一個元件佔1/3版面,第二個元件佔2/3版面。

建立週期

  • constructor(object props) 組件類被實例化。

  • componentWillMount() 在第一次進行渲染之前,僅調用一次此方法。

  • render() -> React Element render方法必須返回一個React Element進行渲染(或為null,則不渲染任何內容)。

  • componentDidMount() 第一次進行渲染後,僅調用一次此方法。至此,此元素的本機UI已完成渲染,可以直接訪問以this.refs進行直接操作。

更新周期

  • componentWillReceiveProps(object nextProps) 此組件的父級傳遞了一組新的props。該組件將重新渲染。

  • shouldComponentUpdate(object nextProps, object nextState) -> boolean 根據下一個值propsstate,組件可以決定重新呈現不重新渲染。

  • componentWillUpdate(object nextProps, object nextState) 在決定重新渲染之後,將調用此方法。

  • render() -> React Element render方法必須返回一個React Element進行渲染(或為null,則不渲染任何內容)。

  • componentDidUpdate(object prevProps, object prevState) 重新渲染後,將調用此方法。

直接操作元件的屬性

用state會全部更新,用setNativeProps可局部更新。

<View>
    <Text 
        onPress={()=>{
            //指向自己,更改顏色
            this.refs.text.setNativeProps({
                style:{color:'green'}
            });
        }} 
    style={{top:200,fontSize:30,textAlign:"center",
    color:this.state.color}} 
    ref="text">{this.props.text}</Text>
</View>

建立應用程式的 icon

  • ios:開啟專案中的images.xcassets,將圖示放入指定的位置

  • android:更改/app/src/main/res/ic_launcher.png

Last updated