其它
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 高度填滿
建立週期
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
根據下一個值props
和state
,組件可以決定重新呈現不重新渲染。componentWillUpdate(object nextProps, object nextState)
在決定重新渲染之後,將調用此方法。render() -> React Element
render方法必須返回一個React Element進行渲染(或為null,則不渲染任何內容)。componentDidUpdate(object prevProps, object prevState)
重新渲染後,將調用此方法。
直接操作元件的屬性
用state會全部更新,用setNativeProps可局部更新。
建立應用程式的 icon
ios:開啟專案中的images.xcassets,將圖示放入指定的位置
android:更改/app/src/main/res/ic_launcher.png
Last updated