ReactNative之基本元件02

// 滑塊的初始值。這個值應該在最小值和最大值之間，預設值是0
value={4}
// 滑塊的最小值（當滑塊滑到最左側時表示的值），預設為0
minimumValue={1}
// 滑塊的最大值（當滑塊滑到最右端時表示的值），預設為1
maximumValue={10}
// 滑塊的最小步長，這個值應該在0到(最大值-最小值)之間，預設值為0
step={2}

// 滑塊左側軌道的顏色。在iOS上預設為一個藍色的漸變色
// ios：滑塊右側區域的顏色。android：滑塊左側區域的顏色 
minimumTrackTintColor={'red'}
// ios：滑塊左側區域的顏色。android：滑塊右側區域的顏色
minimumTrackTintColor={'yellow'}

// 給滑塊設定一張圖片，只支援靜態圖片
thumbImage={require('./image/slider.png')}
// 給軌道設定一張背景圖。只支援靜態圖片。圖片最中央的畫素會被平鋪直至填滿軌道
trackImage={require('./image/slider1.png')}
// 指定一個滑塊左側軌道背景圖，僅支援靜態圖片。圖片最右邊的畫素會被平鋪直至填滿軌道
minimumTrackImage={require('./image/left.png')}
// 指定一個滑塊右側軌道背景圖，僅支援靜態圖片。圖片最左邊的畫素會被平鋪直至填滿軌道
maximumTrackImage={require('./image/right.png')}

// 滑塊顏色
thumbTintColor={'orange'}

// 使用者鬆開滑塊的時候呼叫此回撥，無論值是否變化。回撥值為當前值
onSlidingComplete={() => {}}

在使用者拖動滑塊的過程中不斷呼叫此回撥
onValueChange={() => {}}

// 指定狀態列的變化是否應以動畫形式呈現。目前支援這幾種樣式：backgroundColor, barStyle和hidden
animated bool

// 是否隱藏狀態列
hidden bool

// 設定狀態列文字的顏色, 可選值: enum('default', 'light-content', 'dark-content')
barStyle={'light-content'}

// 設定網路活動指示器(就是那個菊花)是否顯示在狀態列
networkActivityIndicatorVisible={true}

// 通過 hidden 屬性來顯示或隱藏狀態列時所使用的動畫效果，有兩種選擇：fade（預設值）、slide
showHideTransition={'fade'}

// Android 裝置上狀態列的背景顏色
backgroundColor={'blue'}

translucent={true}

// 顯示彈窗的方法
static alert(title, message?, buttons?, options?, type?)


// 顯示彈窗
_shwoAlert() {
Alert.alert(
'標題',
'彈窗提示資訊',
[
{text: '稍後再說', onPress: () => console.log('稍後再說'), style: 'default'},
{text: '取消', onPress: () => console.log('取消'), style: 'cancel'},
{text: '確定', onPress: () => console.log('確定'), style: 'destructive'}
],
{ cancelable: false }
)
}

componentDidMount() {
// 新增監聽
BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
}

componentWillUnmount() {
// 移除監聽
BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress);
}

handleBackPress = () => {
this.goBack(); 
return true;
}

// 退出當前應用
static exitApp()

static getString()
// 獲取剪貼簿的文字內容。返回一個Promise，然後你可以用下面的方式來讀取剪貼簿內容。

async _getContent() {
var content = await Clipboard.getString();
}


static setString(content)
// 設定剪貼簿的文字內容，然後你可以用下面的方式來設定剪貼簿內容。

_setContent() {
Clipboard.setString('hello world');
}

// 靜態方法,在使用者互動和動畫結束以後執行任務, 返回一個可取消的 promise
runAfterInteractions(task)

// 靜態方法，建立一個控制代碼(處理器)，通知管理器，某個動畫或者互動開始了
createInteractionHandle() 

// 靜態方法，進行清除控制代碼，通知管理器，某個動畫或者互動結束了。
clearInteractionHandle(handler:Handle)

// 設定延遲時間，該會呼叫setTimeout方法掛起並且阻塞所有沒有完成的任務，然後在eventLoopRunningTime到設定的延遲時間後，然後執行setImmediate方法進行批量執行任務
setDeadline(deadline:number) 

// 事件
Events:CallExpression
// 監聽
addListener:CallExpression

InteractionManager.runAfterInteractions(() => {
navigator.push({
component: MainPager,
name: 'MainPager'
})
})

// 或者設定state
componentDidMount() {
InteractionManager.runAfterInteractions(() => {
this.setState({renderPlaceholderOnly: false});
});
}

//用來載入一個指定事件的事件監聽器
static addListener(eventName, callback)

//移除某個型別事件的監聽函式
static removeListener(eventName, callback)

//移除某個型別事件的所有監聽函式
static removeAllListeners(eventName)

//把彈出的鍵盤收回去，同時使當前的文字框失去焦點
static dismiss()

componentWillMount() {
// 監聽鍵盤彈出時間
this.keyboardShow = Keyboard.addListener('keyboardWillShow', this._keyboardDidShow)
}

componentWillUnmount() {
this.keyboardShow.remove()
}

_keyboardDidShow = (event) => {
console.log(event)
}