- 综合排序
- 最热优先
- 最新优先
- 来自专栏Android必知必会
React Native 小记 - TouchableOpacity 单次点击无效
网上类似的情况还有 “当点击 TouchableOpacity 时，要点击两下才会触发 onPress() ”、“在 ScrollView 中 TouchableOpacity 需要在 TextInput _input = c} /> <TouchableOpacity style={styles.userPwdRootV3} /> </TouchableOpacity > </View> </View> <TouchableOpacity onPress={() => _login ()}> <Text style={styles.userSignIn}>登录</Text> </TouchableOpacity> </ScrollView> 其中 LessBorderTextInput
3.5K30发布于 2019-07-01 - 来自专栏向治洪
React Native使用Modal自定义分享界面
github.com/facebook/react-native * @flow 分享弹窗 */ import React, {Component} from 'react'; import {View, TouchableOpacity > <TouchableOpacity style={styles.item}> <Image resizeMode /images/share_ic_weixin.png')}/> <Text>微信好友</Text> </TouchableOpacity > <TouchableOpacity style={styles.item}> <Image resizeMode /images/share_ic_weibo.png')}/> <Text>新浪微博</Text> </TouchableOpacity
2.1K50发布于 2018-02-06 - 来自专栏贾鹏辉的技术专栏@CrazyCodeBoy
React Native Hooks开发指南
onPress={this.doFetch}> <Text>加载</Text> </TouchableOpacity> msg的状态，并将其展示在界面上： import React, { useState } from 'react'; import { SafeAreaView, Text, TouchableOpacity onPress={doFetch}> <Text>加载</Text> </TouchableOpacity> <Text onPress={this.doFetch}> <Text>加载</Text> </TouchableOpacity> onPress={doFetch}> <Text>加载</Text> </TouchableOpacity> <Text
4.8K40编辑于 2021-12-20 - 来自专栏大宇笔记
React Native组件篇（四） — Touchable系列组件
Touchable现在主要有四种组件，TouchableHighlight 、TouchableOpacity 、 TouchableNativeFeedback 、 ouchableWithoutFeedback TouchableOpacity会在用户手指按下时降低按钮的透明度，而不会改变背景的颜色。 Component } from 'react'; import { AppRegistry, StyleSheet, View, Text, TouchableHighlight, TouchableOpacity class RNHybrid extends Component { constructor(props) { super(props); this.state = {event:'TouchableOpacity Text> {this.state.hightState} </Text> </TouchableHighlight> <TouchableOpacity
1K20发布于 2019-01-15 - 来自专栏向治洪
react native仿微信PopupWindow效果
import React from 'react' import { StyleSheet, Platform, View, Text, Image, TouchableOpacity > <SpacingView/> <TouchableOpacity activeOpacity={1} onPress > </View> </TouchableOpacity> </Modal> </ /images/ic_arrow_down.png')}/> </TouchableOpacity> <TouchableOpacity > <TouchableOpacity style={styles.action} onPress={() => { this.setState({ showPop: !
2.9K70发布于 2018-02-06 - 来自专栏向治洪
react-native添加redux支持
_onPressReset()}> <Text>归零</Text> </TouchableOpacity> <TouchableOpacity style _onPressInc()}> <Text>加1</Text> </TouchableOpacity> <TouchableOpacity style _onPressDec()}> <Text>减1</Text> </TouchableOpacity> </View> ); } } const _onPressReset()}> <Text>归零</Text> </TouchableOpacity> <TouchableOpacity style _onPressInc()}> <Text>加1</Text> </TouchableOpacity> <TouchableOpacity style
2.1K90发布于 2018-02-06 - 来自专栏月亮与二进制
React Native导航Navigator组件基本使用方法
> <TouchableOpacity onPress={this.onPressButtonB.bind(this)}> <Text style={styles.welcome }> 查询ID为2的学生信息 </Text> </TouchableOpacity> </View> （注意需要import Navigator、TouchableOpacity和下一个界面的文件），其中一个响应方法代码如下： onPressButtonA() { let _this = this > <TouchableOpacity onPress={this.onPressButtonB.bind(this)}> <Text style={ }> 查询ID为2的学生信息 </Text> </TouchableOpacity> </View>
2.2K20发布于 2021-11-23 - 来自专栏技术社区
移动跨平台框架ReactNative弹出框Alert【12】
Step 1: App.js import React from 'react' import { Alert, Text, TouchableOpacity, StyleSheet } from 'react-native = () => { const showAlert = () =>{ Alert.alert('发送数据成功') } return ( <TouchableOpacity onPress = {showAlert} style = {styles.button}> <Text>发送</Text> </TouchableOpacity onPress = {showAlert} style = {styles.button}> <Text>删除</Text> </TouchableOpacity onPress = {showAlert} style = {styles.button}> <Text>修改</Text> </TouchableOpacity
3.4K20编辑于 2022-06-17 - 来自专栏直播知识
短视频软件开发，实现搜索栏逐渐过渡动画
import React, {Component} from 'react'; import { Animated, Easing, View, StyleSheet, TouchableOpacity <View style={styles.container}> <View style={styles.search}> <TouchableOpacity opacity: Opacity }}>取消</Animated.Text> </TouchableOpacity value={this.state.inputText} /> <TouchableOpacity }}> 请输入搜索关键字 </Animated.Text> </TouchableOpacity
64570发布于 2020-12-16 - 来自专栏文大师的新世界
7. 偷用Swiper简改
'; import React, { Component } from 'react'; import { StyleSheet, View, Text, TouchableOpacity > ) case 'cancel': return ( <TouchableOpacity Actions.pop()}> <Text style={Style.blueText}>取消</Text> </TouchableOpacity (this.props.renderRight) { case 'share': return ( <TouchableOpacity > ) } _renderEvent(row) { return ( <TouchableOpacity style={styles.movieItem
2.4K30发布于 2018-08-30 - 来自专栏向治洪
React Native项目实战之搭建美团个人中心界面
View style={styles.header}> <View style={styles.topContainer}> <TouchableOpacity /image/icon_navigationItem_message_white.png')}/> </TouchableOpacity> /image/icon_navigationItem_set_white.png')}/> </TouchableOpacity> /image/icon_navigationItem_message_white.png')}/> </TouchableOpacity> /image/icon_navigationItem_set_white.png')}/> </TouchableOpacity>
2.7K60发布于 2018-02-06 - 来自专栏月亮与二进制
React Native中加载指示器组件ActivityIndicator使用方法
按钮我们用TouchableOpacity组件来实现，这个组件可以添加一个响应方法，下面我们放一小一大两个指示器，代码如下： import React, { Component } from 'react '; import { AppRegistry, StyleSheet, Text, View, ActivityIndicator, TouchableOpacity } from render() { return ( <View style={styles.container}> {/* 切换显示或隐藏的按钮 */} <TouchableOpacity this.showOrHide.bind(this)}> <Text style={{color:'#fff', fontSize: 20}}>显示/隐藏</Text> </TouchableOpacity 然后看我们的界面元素部分，即render中的部分，除了最外面一层view外，最上面就是一个TouchableOpacity，onPress属性指向了一个响应方法，即showOrHide方法，在这个方法中我们可以看到
1.3K10发布于 2021-11-23 - 来自专栏前端开发随笔
Rn使用FlatList导航栏自动回到中间
import { useState, useRef } from 'react' import { FlatList, View, Text, StyleSheet, TouchableOpacity showsHorizontalScrollIndicator={false} renderItem={({ item, index }) => ( <TouchableOpacity {item} </Text> </TouchableOpacity
48110编辑于 2023-10-17 - 来自专栏向治洪
React-Native 组件之 Modal
综合例子： import React, { Component} from 'react'; import { AppRegistry, View, Modal, TouchableOpacity </Text> <TouchableOpacity onPress={() => { }}> <Text>隐藏 Modal</Text> </TouchableOpacity </View> </View> </Modal> <TouchableOpacity this.setModalVisible(true) }}> <Text>显示 Modal</Text> </TouchableOpacity
2.6K50发布于 2018-01-26 - 来自专栏前端开发随笔
Rn实现省市区三级联动
github area分支 import { useState, useEffect } from 'react' import { View, StyleSheet, FlatList, Text, TouchableOpacity { console.log(selected) }, [selected]) const renderItem = ({ item }) => ( <TouchableOpacity item.name}</Text> {isActive(item.code) && <View style={styles.option_icon} />} </TouchableOpacity return ( <View style={styles.tab_item} key={index}> <TouchableOpacity {item.name} </Text> </TouchableOpacity
1.1K10编辑于 2023-09-01 - 来自专栏向治洪
React Native仿美团下拉菜单
*/ import React, {Component} from 'react'; import {Platform, View, Dimensions, Text, StyleSheet, TouchableOpacity style={styles.action} > <Image style={styles.scanIcon}/> </TouchableOpacity > <TouchableOpacity style={styles.searchBar}> <Image source={require > <TouchableOpacity style={styles.action} onPress={() => { this.setState({ showPop: ! /images/icon_address.png')}/> </TouchableOpacity> </View> ) }
5.7K50发布于 2018-01-26 - // 问题：没考虑触摸优化、没有下拉刷新、不支持手势、性能差 // ✅ 移动子代理会给你的完整方案 import { FlatList, RefreshControl, TouchableOpacity useState(false); return ( <FlatList data={items} renderItem={({ item }) => ( <TouchableOpacity '' : ''}</Text> </TouchableOpacity> </View> {/* 记住我 */} <TouchableOpacity style={styles.rememberContainer} </Text> </TouchableOpacity> <TouchableOpacity onPress={() => navigation.navigate来自专栏前端达人
Claude Code移动开发子代理实战：打造你的全平台APP架构师
div>)}
62510编辑于 2025-10-09
移动跨平台框架React Native状态栏组件StatusBar【16】
使用脚本来控制状态栏的主题色 App.js import React, { Component } from 'react'; import {View, Text, StatusBar, StyleSheet, TouchableOpacity <StatusBar barStyle = {this.state.barStyle} hidden={this.state.hidden} /> <TouchableOpacity style={styles.button} onPress = {this.changeHidden}> <Text>显示或隐藏</Text> </TouchableOpacity > <TouchableOpacity style={styles.button} onPress = {this.changeBarStyle}> <Text>改变主题色</Text> </TouchableOpacity> </View> ) } } export default App
React Native与Android 原生通信
return ( <View style={styles.container}> <Text>{this.state.data}</Text> <TouchableOpacity > <TouchableOpacity onPress={this. > <TouchableOpacity onPress={this. > <TouchableOpacity onPress={this. > <TouchableOpacity onPress={this.
React Native的动画（一）
Component } from 'react'; import { NativeModules, LayoutAnimation, AppRegistry, View, Text, TouchableOpacity this.setState({w: this.state.w + 50, h: this.state.h + 50}) } render(){ return ( <TouchableOpacity </Text> </TouchableOpacity> ) } } 我们用一个TouchableOpacity包裹了<Text>控件。 然后，给TouchableOpacity输入按压回调，在回调中调用动画。 我们使用LayoutAnimation创建动画，输入了三个参数，分别是动画时间5000ms、插值器类型弹性和动画类型缩放。
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号