Components and APIs
UIEXPLORER

Text 文字

字形

color - #e4e4e499 = #e4e4e4 (顏色) + 99 (透明度)
透明度百分比 16進位

FlatList 列表

繼承 : scrollview

ref={(ref) => this.myFlatList = ref} - 指定ref, 可以用來呼叫 method
data - 要顯示的資料 (array)
ListHeaderComponent - 在最前面增加 component
ListFooterComponent - 在最尾巴增加 component
onEndReached - 當到底部會執行的動作
onEndReachedThreshold - 多遠算到底部
onViewableItemsChanged - 當看到的畫面產生改變 (要搭配 viewabilityConfig props)
horizontal - 是否要用讓 item 用水平方式呈現? 
bounces={false} - 防止彈跳造成多call onEndReached //  false = ios 會變成沒問題 但 android 會變成有問題

當滑到像第10頁如果沒有將 index 重新設定Flatlist 會一直載入到第 10頁,
用下面的辦法解決, 這樣可以將Flatlist 滑到最上面

this.myFlatList.scrollToOffset({animated: true, offset:0});

在 flatList 外用scrollView 包會一直觸發 onEnd

當看到的item發生改變 - props - onViewableItemsChanged
ReactNative之FlatList之onViewableItemsChanged深度挖掘与研究

FlatList ScrollView Error on any State Change - Invariant Violation: Changing onViewableItemsChanged on the fly is not supported

constructor(props) {
    this.handleViewableItemsChanged =         this.handleViewableItemsChanged.bind(this)
        this.viewabilityConfig = {viewAreaCoveragePercentThreshold: 50}
}

handleViewableItemsChanged(info) {
        console.log(info)
    }
    
<FlatList
onViewableItemsChanged={this.handleViewableItemsChanged}
                    viewabilityConfig={this.viewabilityConfig}
/>

可以用來判斷滑動

<FlatList
    onScroll={event => {
     
    }}
/>

要讓 Flatlist 知道除了 data props 有資料改變的props 是用 extradata

<FlatList data={...} extraData={this.state} .../>

Flatlist + TextInput 會讓 keyboard dismisses

<FlatList
        ...
        data={[...]}
        ListHeaderComponent={
          <TextInput
            ...
            onChangeText={(value: string): void => this._onChangeText(value)}
            value={this.state.query}
            ...
          />
        }
        ...
      />

TextInput

const _values = {
    content: ""
};

a () {
   this.props.b( _values.content);
   _values.content = "";
}

<TextInput
    onChangeText={val => (_values.content = val)}
    onSubmitEditing={e => {
        this.a();
    }
/>

ScrollView 可滑動 view

TouchableOpacity 可以按的

style props

zIndex : 垂直的等級

react native element - ui components
React Navigation - route

動畫 Animated

interpolate () 插值 - 將輸入值轉成輸出值

const rotation = this.mode.interpolate({
            inputRange: [0, 1],
            outputRange: ['0deg', '45deg']
        });

搭配 Animated.View
<Animated.View style={{
  transform: [
     {rotate: rotation}
  ]
}}>

Animated.View 相關的 style 會跟 interpolate 的值做連動

BackHandler

偵測實體返回鍵 (android)

The event subscriptions are called in reverse order (i.e. last registered subscription first),   
and if one  subscription returns true then subscriptions registered earlier will not be called.  

訂閱的 BackHandler 是先進後出的方式(stack), 還有就是當回傳 true 時之前訂閱的就不會觸發 反之回傳 false 時會觸發上一個訂閱的 BackHandler

當沒有任何一個訂閱時會回傳 true

其它

用 view 產生各種幾何圖形

  1
2_|_3
  |
  4

1. borderTopWidth
2. borderLeftWidth
3. borderRightWidth
4. borderBottomWidth

Image

當 image 太大張時會導致一直掉格