Wk 10 Handling Touches part 1 Button Alert

Wk #10 Handling Touches (part. 1) Button, Alert, Touchable. Highlight

Button _on. Press. Button() { Alert. alert('You tapped the button!') } <Button on. Press={this. _on. Press. Button} title="OK!" color="#841584" /> App_Button. Basics. js

Alert _on. Press. Button() { Alert. alert('You tapped the button!') } <Button on. Press={this. _on. Press. Button} title="OK!" color="#841584" /> App_Button. Basics. js

Alert App_Three. Buttons. Alert. js

Alert // Works on both i. OS and Android Alert. alert( 'Alert Title', 'My Alert Msg', [ {text: 'Ask me later', on. Press: () => console. log('Ask me later pressed')}, {text: 'Cancel', on. Press: () => console. log('Cancel Pressed'), style: 'cancel'}, {text: 'OK', on. Press: () => console. log('OK Pressed')}, ], { cancelable: false } App_Three. Buttons. Alert. js ) 指定對話框是否能取消 取消：碰觸對話框以外的視窗範圍

取得使用者所選按的按鈕 constructor() { super(); this. state = { option: 0 }; } Alert. alert ( 'Hello World. the title', 'Hello Messages. the message', [ { text: 'first button', on. Press: () => this. set. State({ option: 1 }) }, { text: 'second button', on. Press: () => this. set. State({ option: 2 }) } ] );

Touchable. Highlight (on Text) App_Touchable. Highlight. On. Text. js

Touchable. Highlight 採用<Text>標籤描述按鈕文字 必須恰有一個child render() { return ( <View style={styles. container}> <Touchable. Highlight style={styles. button} on. Press={this. on. Press} > <Text> Touch Here </Text> </Touchable. Highlight> <View style={[styles. count. Container]}> <Text style={[styles. count. Text]}> { this. state. count !== 0 ? this. state. count : null} </Text> </View> App_Touchable. Highlight. On. Text. js ); }

render() { return ( <View style={styles. container}> <Touchable. Highlight constructor(props) { style={styles. button} super(props); on. Press={this. on. Press} this. state = { count: 0 }; > } <Text> Touch Here </Text> </Touchable. Highlight> <View style={[styles. count. Container]}> on. Press = () => { <Text style={[styles. count. Text]}> this. set. State({count: this. state. count + 1}); { this. state. count !== 0 ? } this. state. count : null} </Text> </View> App_Touchable. Highlight. On. Text. js </View> ); } Touchable. Highlight

Touchable. Highlight render() { return ( on. Long. Press <View style={styles. container}> <Touchable. Highlight constructor(props) { style={styles. button} super(props); on. Press={this. on. Press} this. state = { count: 0 }; on. Long. Press={this. on. Long. Press} } > <Text> Touch Here </Text> on. Press = () => { </Touchable. Highlight> this. set. State({count: this. state. count + 1}); <View style={[styles. count. Container]}> } <Text style={[styles. count. Text]}> { this. state. count !== 0 ? on. Long. Press = () => { this. state. count : null} this. set. State({count: this. state. count + 5}); </Text> } </View> App_Touchable. Highlight. On. Long. Press. js </View>

Touchable. Highlight App_Touchable. Highlight. On. Long. Press. js on. Press與on. Long. Press 的效果 on. Press on. Long. Press

Touchable. Highlight (on Image) <Touchable. Highlight style={styles. button} on. Press={this. on. Press} > <Image source={{ uri: 'https: //i. ytimg. com/vi/SNggmeil. XDQ/maxresdefault. jpg' }} style={{ width: 193, height: 110 }} /> </Touchable. Highlight> App_Touchable. Highlight. On. Image. js

Two Views in One Touchable. Highlight <Touchable. Highlight style={styles. button} on. Press={this. on. Press} on. Long. Press={this. on. Long. Press} > <View style={{ background. Color: 'steelblue' }}> <Text>Touch Here </Text> <Text>{ this. state. count }</Text> </View> <View style={{ background. Color: 'red' }}> <Image source={{ uri: 'https: //i. ytimg. com/vi/SNggmeil. XDQ/maxresdefault. jpg' }} /> </View> </Touchable. Highlight> style={{ width: 193, height: 110 }} App_Two. Views. In. One. Touchable. Highlight. js

Two Touchable. Highlights return ( <View> <Touchable. Highlight > style={styles. button} on. Press={this. on. Press} on. Long. Press={this. on. Long. Press} <View style={{ background. Color: 'steelblue' }}> <Text>Touch Here </Text> <Text>{ this. state. count }</Text> </View> </Touchable. Highlight> <Touchable. Highlight > style={styles. button} on. Press={this. on. Press} on. Long. Press={this. on. Long. Press} <View style={{ background. Color: 'red' }}> <Image source={{ uri: 'https: //i. ytimg. com/vi/SNggmeil. XDQ/maxresdefault. jpg' }} style={{ width: 193, height: 110 }} /> </View> </Touchable. Highlight> </View> ); App_Two. Touchable. Highlights. js

版面設計 flex: 4 <Touchable. Highlight style={styles. button} on. Press={this. on. Press} > <Text style={{ font. Size: 40 }}> 7 </Text> </Touchable. Highlight> flex: 1 App_Calc_0_. js

練習 1：如何知道使用者所按下的按鈕 <View style={{ flex: 1 }}> <Touchable. Highlight style={styles. button} on. Press={() => this. num. Press(7)} > <Text style={{ font. Size: 40 }}> 7 </Text> </Touchable. Highlight> </View> 按鈕 7按下所執行的常式 按鈕 7

練習 1：利用constructor()設定狀態變數 constructor() { super(); this. state = { stage: 0, show. Number: 0, }; } 設定目前的階段編號 要顯示的數字

練習 1：將介面元素與狀態變數綁定 <View style={{ flex: 4, justify. Content: 'flex-end' }}> <Text style={{ font. Size: 40, color: 'blue', background. Color: 'white' }}> {this. state. show. Number} </Text> </View>

練習 2：讓按下的數字可以相接 num. Press = (param) => { if (this. state. stage === 0) { this. set. State({ stage: 1, show. Number: param }); } else if (this. state. stage === 1) { this. set. State({ show. Number: this. state. show. Number * 10 + param }); } } App_Calc_2_First. Number. Ending. js

練習 3：新增顯示狀態值的文字標籤 <View style={{ flex: 4, justify. Content: 'flex-end' }}> <Text style={{ font. Size: 40, color: 'blue', background. Color: 'white' }}> {this. state. op} </Text> <Text style={{ font. Size: 40, color: 'blue', background. Color: 'white' }}> {this. state. stage} </Text> <Text style={{ font. Size: 40, color: 'blue', background. Color: 'white' }}> {this. state. show. Number} </Text> </View>

練習 3：設定按鈕+的事件處理常式 <View style={{ flex: 1 }}> <Touchable. Highlight style={styles. button} on. Press={() => this. num. Press('+')} > <Text style={{ font. Size: 40 }}> + </Text> </Touchable. Highlight> </View>

num. Press = (param) => { if (this. state. stage === 0) { this. set. State({ stage: 1, show. Number: param }); } 練習 3：設計按鈕+的 事件處理常式 else if (this. state. stage === 1) { if (0 <= param && param <= 9) { this. set. State({ show. Number: this. state. show. Number * 10 + param }); } else if(param === '+') { this. set. State({ stage: 2, op: '+' }); }}}

練習 3：設定記錄運算符號的新狀態變數(op) constructor() { super(); this. state = { stage: 0, show. Number: 0, op: null }; } App_3_op. Entered. js

練習 4： 處理+之前的 第一個數字 else if (this. state. stage === 1) { if (0 <= param && param <= 9) { this. set. State({ show. Number: this. state. show. Number * 10 + param }); } else if(param === '+') { this. set. State({ stage: 2, 若使用者輸入+，讓顯示幕顯示 0 show. Number: 0, num 1: this. state. show. Number, 將第一個數字儲存起來(num 1) op: '+' }); } }

練習 4： 處理+之前的第一個數字 constructor() { super(); this. state = { stage: 0, show. Number: 0, num 1: 0, op: null }; } App_Calc_4_Screen. Cleared. Again. js