1. 程式人生 > >React Native點選

React Native點選

React Native 中的點選事件

React Native中Text元件有點選事件其他還沒有碰見自帶點選事件的,
一般用Touchable..來做點選

  • TouchableHighlight 點選會有點選背景顏色
  • TouchableOpacity 點選會有一個漸變透明的效果
  • TouchableWithoutFeedback 毫無效果和Text的onPress一樣

上面三個元件中的點選方法有四個

  1. onPress 普通的點選
  2. onPressIn 開始點選 有點像Android裡面的onKeyDown剛開始按下的時候呼叫的方法
  3. onPressOut 像Android裡面的onKkeyUp
    手指在螢幕擡起的瞬間
  4. onLongPress 長按事件
<TouchableHighlight onPress={this.touchable.bind(this,'TouchableHighlight onPress')}
                                   onPressIn={this.touchableIn.bind(this,'TouchableHighlight onPressInt')}
                                   onPressOut={this.touchableOut.bind(this,'TouchableHighlight
onPressOut')} onLongPress={this.longtouchable.bind(this,'TouchableHighlight onLongPress')}>
<Text style={styles.item}>TouchableHighlight</Text> </TouchableHighlight> <TouchableOpacity onPress={this.touchable.bind(this,'TouchableOpacity
onPress')}>
<Text style={styles.item}>TouchableOpacity</Text> </TouchableOpacity> <TouchableWithoutFeedback onPress={this.touchable.bind(this,'TouchableWithoutFeedback onPress')}> <Text style={styles.item}>TouchableWithoutFeedback</Text> </TouchableWithoutFeedback> <Text style={styles.item} onPress={this.touchable.bind(this,'Text onPress')}>Text自帶的點選事件</Text>

相關推薦

React Native

React Native 中的點選事件 React Native中Text元件有點選事件其他還沒有碰見自帶點選事件的, 一般用Touchable..來做點選 TouchableHighlight

React Native 兩次手機back鍵退出程式

解決點選兩次手機back鍵退出程式程式碼及註釋如下: //雙擊返回鍵退出程式 //新增BackHandler,ToastAndroid的註冊 componentWillMount(){//執行一次,在初始化render之前執行, BackHan

react native事件傳遞引數

比如我們定義一個TouchableOpacity點選事件,該方法需要接收一個引數值,如下 _gotoSubClass(sectionID, rowID) { console.log("sect

react-native擊事件

點擊 this his ati res native 事件 reac react 點擊事件 <View> <Button title="點擊事件" onPress={this._onPressButton.bind(this)}/></

React Echarts 事件

在React中用Echarts畫了一個環形圖,如下。 現在想要實現一個點選事件 然後查詢了一下Echarts的官方文件。http://www.echartsjs.com/api.html#events 是這樣的, 然後我是這樣做的:   onclick = {

react實現某個元素之外自動隱藏此元素

是在redux-saga和react-redux環境下 步驟一: 給document繫結事件 步驟二: 構建hide函式     步驟三: 給元素內子元素點時不需要隱藏它的方法加上阻止事件冒泡事件, 這樣就不會冒泡到頂層的document e.nativeE

React Native,複, 全功能

簡單寫了一個ListView資料的單選和全選,刪除功能 利用JS的Map物件進行勾選,取消勾選和全選 方法簡單粗暴 單選功能見註釋的 單選邏輯 , 單選功能不做全選 其餘未註釋的程式碼為複選和全選功能 /** * Created by

React Native,多

20170906150468611759afb0250585a.gif 1.renderShowEditView裡面的2個圖片自己替換一下 2.複製程式碼直接就可以跑 import React, {PureComponent} from 'react' import {View, Text, StyleS

react初學事件不起作用

學習react的時候發現點選事件沒有起作用,最後發現是onClick事件裡C沒有大寫 <button onClick = {increate}>點選 </button>

React.js獲取自定義屬性

點選刪除按鈕,刪除列表中對應項本來是React比較基礎的應用,可是應用情況變得複雜了以後,我還真想了一會兒才搞定。 簡化一下應用場景:點選新增按鈕,增加一條輸入框,點選輸入框旁邊的按鈕,刪除該輸入框(不能刪錯了啊)。 先說第一種方法問題剛上手,首先規劃級別:一個輸入框和對應刪除按鈕為一個子元件,整體為父元

React-Native學習之 圖片做背景 modal 其他區域消失

1.modal點選其他區域消失 <TouchableWithoutFeedback onPress={()=>this.setState({showTopMenu:false})}> <View style={{position:

React-Native上拉重新整理下拉載入,跳轉詳情程式碼解析

React-Native 上拉重新整理下拉載入,點選跳轉詳情程式碼解析 配置路由器 import { createTabNavigator, createStackNavigator } from "react-navigation"; import New1

React Native之Android 和 iOS在觸發事件時的相容性處理

最近,我在專案中遇到了一個bug,bug的情況描述大致如下: 當點選按鈕A時,彈出彈層,彈層有一個按鈕B,邏輯是:當點選按鈕B時,首先彈層消失,緊接著開始調取C介面流程。在Android上正確顯示,但是iOS中只是彈層消失,並沒有調取C介面事件。 對於這種情況,我之前開發過

React Native之彈框存在TextInput,輸入框有焦點情況下需要兩次才可觸發事件-解決

Bug情況描述:React Native專案中,點選按鈕A出現彈框浮層,彈框中需要TextInput輸入數字,鍵盤浮起來;這時候點選 取消按鈕L 或者 確定按鈕R,只是讓鍵盤收起,但是並沒有觸發 取消

react native中使用react-native-viewpager實現的商品展示新增事件

對於android,react-native-viewpager這個第三方實現商品展示很好用 <ViewPager dataSource={this.state.adDataSource}

React Native TouchableOpacity 封裝 防止快速 多次響應

不耽誤幹活,直接上程式碼,功能比較簡單,具體延時時間自己定,還需要啥功能自己改進一下。 import React,{ Component } from "react"; import {Touch

react native 中navigator 避免連續多次push到一樣的介面

在React native專案開發中,當用戶點選按鈕navigator執行頁面跳轉的時候,如果連續按了兩下,竟然會push兩個相同的頁面,造成執行緒卡頓崩潰的現象。在Android我們通過設定launchMode可以輕鬆的避免出現這樣的問題,但在react native中並沒

React Native 處理TextInput在輸入後,佈局空白處軟體盤能彈出和收回。

React Native 處理軟體盤彈出和收回。 現在是有這樣一個需求,就是,在TextInput中輸入文字 ,會彈出軟體盤 ,但是 ,當我點選空白處,軟體盤卻不退出,我想點選其他空白處,軟體盤隱藏,怎麼做了。軟體盤之所以不能退出,是因為 輸入的時候,當你輸入完畢後,焦點

React NativeReact Native中DrawerLayoutAndroid通過實現展開和關閉

  React Native中,DrawerLayoutAndroid元件與Android原生開發中的DrawerLayout一樣實現側滑選單的效果。通過手勢左右滑動實現拉出與退出的操作,但是需要通過點選圖示或者文字就能彈出側滑選單該怎麼做呢?   這時就需要

React Native 的圖片放大效果的元件使用 react-native-zoom-image

import React, {PropTypes, Component} from 'react'; import {   View,   Text,   Image,   Modal,   Easing,   StyleSheet,   PanResponder,   NativeModules,   f