TouchableHighlight到组件？
TouchableHighlight是React Native中的一个组件，用于实现可点击的高亮效果。它是一个包装组件，可以将其他组件包裹在内部，并为其提供触摸事件的处理。
TouchableHighlight组件的主要属性包括：
- onPress：点击事件的处理函数，当用户点击组件时触发。
- underlayColor：点击时的背景颜色，用于实现点击高亮效果。
- activeOpacity：点击时的透明度，用于控制点击时组件的透明度变化。
TouchableHighlight组件常用于实现按钮、列表项等需要点击交互的场景。它可以与其他组件一起使用，例如Text、Image等。
在腾讯云的相关产品中，没有直接对应的产品与TouchableHighlight组件相关。然而，腾讯云提供了丰富的云计算服务，可以用于开发和部署React Native应用。例如，可以使用腾讯云的云服务器CVM来部署React Native应用的后端服务，使用云数据库MySQL来存储数据，使用云存储COS来存储图片和文件等。
总结起来，TouchableHighlight是React Native中用于实现可点击的高亮效果的组件，常用于按钮、列表项等需要点击交互的场景。腾讯云提供了丰富的云计算服务，可以用于开发和部署React Native应用的后端服务、存储数据等。
相关·内容
1回答
我正在尝试使用TouchableHighlight / button导航到其他屏幕，但它不能导航到其他屏幕。没有错误。当我在同一屏幕上按下TouchableHighlight/按钮时，没有任何反应。
trackButton() {
const navigation = this.props.navigation;
return (
<View style={styles.footer}>
{/* <TouchableHighlight underlayColor='transparent' onPre
浏览 1提问于2018-12-03得票数 0
在打开模式时，如何将焦点设置到模式中的第一个(或任何给定的) TouchableHighlight组件？我在用D-pad/kayboard/TV遥控器
让我们使用react-native文档模式示例的片段：
<View style={{marginTop: 22}}>
<Modal
animationType="slide"
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => {
Alert.alert(&#
浏览 3提问于2018-10-26得票数 2
1回答
我想在使用redux成功登录后导航到profile页面，但是它会产生错误，如下所示：
未处理的承诺拒绝: TypeError:未定义不是对象(计算'_this3.props.navigation')
import React from 'react';
import { StyleSheet, Text, View, Button, TextInput, Image, TouchableHighlight } from 'react-native';
import { connect } from 'react-redux&#
浏览 0提问于2019-03-19得票数 0
这在Login.js组件中工作得很好：
<View style={{flexDirection: 'row', justifyContent:"center"}}>
<TouchableHighlight onPress={() => this.onPressSocialButton('tel')} >
<Image source={require('./img/icono-tel.png'
浏览 1提问于2018-06-27得票数 1
我需要在react本机中显示类似选项卡的行为。
我从创建状态变量selectedSub开始，该变量由“”中的值初始化。
现在我的模式有2 TouchableHighlight，如下所示
_availabiltyModal() {
return (
<TouchableHighlight
onPress={() => { this.setState({ selectedSub: 'from' }) }}
activeOpacity={0.9}
style={[styles.tab, this.state.selectedSub == '
浏览 1提问于2018-11-08得票数 2
回答已采纳
我在我的样式容器中有一个图标列表，这些图标显示在flexDirection:'row'中，但是当图标的数量超过视图宽度时，它们不会中断到下一行，而是继续显示在视图的右侧。如果内容达到最大宽度，我如何让内容换到下一行？
设置样式：
var styles = StyleSheet.create({
container: {
width: SCREEN_WIDTH, //width of screen
flexDirection:'row',
backgroundColor: 'transparent',
margi
浏览 1提问于2016-01-09得票数 43
回答已采纳
我有一个设置了defaultValue的<TextInput/>和一个按钮，在这个按钮上它将触发并将<TextInput>的defaultValue传递到其他地方。
但是如何将<TextInput/>的defaultValue传递给<TouchableHighlight/>的onPress方法呢？
这就是我想要实现的：
changeName(text) {
this.setState({nameNow: text}) //How can I immediately set the defaultValue='PassMeIn
浏览 0提问于2016-10-04得票数 10
有没有办法在安卓系统的TouchableHighlight上用onPress显示一个新的文件(视图)？
类似于：
var Details = require(./NewView);
<TouchableHighlight onPress={this.showView()}><TouchableHighlight>
showView(){
<Details/>
}
浏览 1提问于2016-04-24得票数 1
我刚刚从react导航4迁移到了5。使用v4我做到了 this.props.navigation.setParams({
scrollToTop: this._scrollToTop,
}); 并在我的自定义MyTabBar中调用函数，如下所示： onPress={() => {
navigation.navigate("HomeStack");
const navigationInRoute = state.routes[0].routes[0];
navigati
浏览 64提问于2020-04-05得票数 0
2回答
我用react原生语言写了一个简单的登录应用。当我尝试使用StackNaviagator导航到其他组件时，出现以下错误：
我使用这个链接中的代码：。我使用const Appnavigator来定义我需要导航到的新组件。我还使用this.props.navigation将该属性传递给堆栈导航器中的每个屏幕组件。我该如何修复这个错误呢？
我的代码是：
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
TextInput,
Button,
Touchabl
浏览 0提问于2018-09-23得票数 0
1回答
我正在使用React Native和React Native Modal。
我想做的是输入任务详细信息(文本)到模式，并在隐藏模式点击传递输入的文本到主屏幕。
尝试将文本作为状态属性传递-尽管没有成功...
这是我的Modal：
export default class List extends Component {
constructor() {
super();
}
state = {
modalVisible: false,
taskDetails: ''
};
setModalVisible(visible) {
t
浏览 5提问于2019-08-22得票数 0
我的react原生应用程序中有几个按钮，当按下任何按钮时，颜色应该会改变。代码如下所示
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
TextInput,
Button,
TouchableHighlight,
Image,
Alert
} from 'react-native';
export default class Home extends Component {
constructor(props) {
浏览 0提问于2019-02-15得票数 1
1回答
我想在TouchableHighlight in IOS应用程序中对齐react中的这个选项图标--原生，但是当我实现它时，它不是使用属性，因为它是的唯一属性。我怎样才能得到在android和IOS中都能使用的替代方案呢？
<TouchableHighlight
style={[{position: 'absolute', bottom: 20, zIndex:999999, right: 155, borderRadius: 25}, (this.state.searchList)? { backgroundColor: '
浏览 1提问于2018-11-23得票数 0
这是我第一次接触JS/React/React本机。我还没有完全掌握这个框架的机制，所以请善待我。
我所拥有的：
<View style={styles.container}>
<View style={styles.timerContainer}>
<View style={styles.timerBar}>
<Image style={styles.icon} source={require('../../img/time50.png')}/>
{Timer
浏览 1提问于2017-08-16得票数 0
回答已采纳
当使用带有ref="nav“的子组件挂载组件(使用jsdom)时，我希望this.refs.nav是componentDidMount中的子导航器。当我在this.refs (console.log，this.refs)中使用componentDidMount时，会得到空白的componentDidMount对象。
下面的组件在ios模拟器中呈现并工作得很好，但是使用酶的挂载，参考文献是空白的。我还注意到，如果根元素上有ref，则在componentDidMount中定义了特定的引用。
我正在使用：
"react": "^15.4.1",
"re
浏览 1提问于2017-01-06得票数 1
1回答
在我按下“继续”(检查图片)之后，我想知道如何导航到下一页。我目前正在使用下面的代码，但是它给了我一个错误：“无法读取未定义的属性‘导航’”
fbAuth() {
LoginManager.logInWithReadPermissions(['public_profile']).then(function(result){
if (result.isCancelled){
console.log('Login Cancelled')
} else {
t
浏览 1提问于2017-12-28得票数 0
回答已采纳
1回答
我正在尝试向我的按钮中添加一个无状态组件。
const button = ({onButtonPress, buttonText}) => {
return (
<TouchableHighlight
onPress={() => onButtonPress()}>
<ButtonContent text={buttonText}/>
</TouchableHighlight>
)
};
得到这个错误：
Warning: Stateless function components cannot be given
浏览 2提问于2016-12-28得票数 1
回答已采纳
我试图实现反应-本机-抽屉在反应-本机-路由器-通量与redux。尝试遵循下面的示例：，但仍然得到一个错误：Element type is invalid: expected a string (for built-in components) but got: object. Check the render method of 'DefaultRenderer'.
什么正确的方式来实现抽屉的反应-本机-路由器-通量？
编辑-更新:仍然获得错误‘元素类型无效.’
快速注释:如果我做了Actions.drawer，我得到了错误，但是如果我做了Actions.home，什么都不会
浏览 2提问于2016-09-23得票数 3
我正在使用DrawerNavigator，我有3页：Router page、mainScreen和photos page。
我创建了一个标题导航栏区域，我使用这个<TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}>在mainScreen中打开抽屉菜单，并将其用于照片页面，在mainScreen中菜单是可以的，但是当我在照片页面中单击<TouchableHighlight onPress={() => this.props.navigatio
浏览 14提问于2017-07-20得票数 48
回答已采纳
我正在尝试将模态实现到Listview中，其中每个列表组件都是可点击的，并带出一个包含相关信息的模态。我目前还不能让它工作。我的代码如下：
renderRow函数：
var modalState = false;
open = () => {
modalState = true;
}
close = () => {
modalState = false;
}
return (
<View>
<View style={{flexDirection: 'row', padding
浏览 1提问于2017-07-05得票数 0
我怎么发动汽车呢？我的代码是：
ListComponent.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ListView,
TouchableHighlight
} from 'react-native';
class ListComponen
浏览 3提问于2016-08-01得票数 0
我为一家公司构建的应用程序制作了一个可滚动的标题。当我尝试使用TouchableHighlight来触发onPress()事件时，它没有注册，因为position键被设置为'absolute'： 在互联网上搜索了几个小时后，我尝试了以下几种方法： -raising zIndex/elevation -making确保TouchableHighlight是从‘react- -Animated’-Animated库中导入的。 当我注释掉主标题中的position:absolute时，它工作得很好，但是当标题向上滚动时，它会在后面留下一个我无法在其上放置视图的视图。 我的选择快用完
浏览 50提问于2020-10-05得票数 0
回答已采纳
2回答
如何访问(get和set)容器组件中的状态？ 我正在获取Undefined is not an object evaluating this.state.*，因为无法从MultiImagePost访问它。是否有一种方法可以将this绑定到容器组件？ export default class ImagePost extends React.Component {
state = {
index: 0,
modalVisible: false,
currentImages: []
};
render() {
浏览 18提问于2019-09-21得票数 0
点击时，TouchableHighlight如何处理文本的颜色。我已经用underLayColor在backgroundColor上做过了。下面是我的代码：
<TouchableHighlight
style={{ borderRadius: 5}}
underlayColor="#ffffff"
onPress={this.onLoadPress}>
<View
浏览 7提问于2015-11-03得票数 3
我的组件中有一个标题，如下所示： static navigationOptions = {
title: 'Accounts',
headerRight:( <OpenCamera showImageSlider={this.showImageSlider} /> ),
}; OpenCamera是一个具有相机image.OpenCamera文件的组件，如下所示： import React, { Component } from 'react';
import {Image, TouchableH
浏览 20提问于2019-10-16得票数 0
回答已采纳
2回答
编辑：
在问这个问题之前，我在代码中犯了一些愚蠢的错误。我现在意识到，这个问题可能不会像我所说的那样对任何人有用，实际上是误导人的。向那些回复的人表示歉意并感谢你们。
我目前正在学习“反应本地人”，并遇到了一些不直观的行为。据我所知，useEffect钩子可以用来确定组件的生命周期(即当它挂载和卸载时)。当我更新组件中的状态(在本例中为“ComponentX”)时，整个组件似乎重新装入。我不认为这是有意的行为。如果有人能告诉我，如果是这样--或者我做错了什么，导致了这一切--那将是非常有帮助的！谢谢。
预期行为：组件不卸载和重新装入。
实际行为：组件在每次状态更改时重新装载。
import
浏览 2提问于2021-05-11得票数 0
我在一个单独的js文件中声明了一个Modal组件，并试图在发生onPress事件时使其出现。我看上去没办法跟你讨价还价。
我在谷歌上搜索并找到了，但要么我得不到什么，要么对我不起作用。
我有下面的modal.js
import React, {Component} from 'react';
import {
Modal,
StyleSheet,
Text,
TouchableHighlight,
View,
Alert
} from 'react-native';
import config from '../config/co
浏览 0提问于2019-06-27得票数 0
回答已采纳
我正在尝试实现一个“按下并保持”记录按钮，该按钮在发布时停止录制，但是我找不到在新闻事件结束时触发的事件，如下面的onPressRelease：
render() {
return (
<TouchableHighlight onPress={this.recordStart} onPressRelease={this.recordStop}>
<Image source={recordIcon} />
</TouchableHighlight>
);
}
TouchableOpacity、To
浏览 0提问于2018-04-04得票数 1
回答已采纳
大家好，我是新来的反应，我刚开始学习。
我正在尝试react native，我已经研究过它，现在我正在尝试学习它，这是我在这方面的第一天，
我刚刚创建了react本机项目，并在创建js中创建了一个js文件和写入视图，并导入到index.android.jd中，但它显示了默认视图
以下是代码
index.android.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import Comp
浏览 7提问于2017-07-14得票数 0
我正在尝试创建一个带有图像的自定义按钮。但图像最初是非常大的，所以我必须调整它的大小以适应屏幕。然而，我似乎不能调整TouchableHighlight的大小，因为它应该是一个按钮。
正如你在图片中看到的，图像周围的黑色区域是可触摸的，而我只希望图像是可触摸的。
因此，我需要找到一种方法来缩小触摸屏到与图像相同的大小。
这是我目前使用的代码：
<TouchableHighlight
style={styles.button}
onPress={() =>
navigate('SplashScree
浏览 0提问于2018-02-06得票数 2
我玩的反应本土化，并有一个奇怪的行为。
当我试图显示用于Android的ActitvityIndicator，将其动画属性设置为true时，如果该变量作为false启动，则该变量在状态下的showProgress变量将无法工作。
在下面的示例中，如果ActivityIndicator动画属性开始时为true，则按钮将使ActivityIndicator隐藏或正确显示。
import React, { Component } from 'react';
import {
Text,
View,
StyleSheet,
TextInput,
TouchableH
浏览 1提问于2016-07-26得票数 20
回答已采纳
我试图将一个按钮放在一个文本组件中，但收到一个错误消息“当前不支持嵌套”。当我将"TouchableHighlight“组件移到组件之外时，它会产生一个问题，我会收到一条警告：”在现有状态转换期间无法更新...“ 我正在寻找一种变通方法或关于如何处理的建议。 import React from 'react'
import { connect } from 'react-redux'
import {
Button,
ScrollView,
StyleSheet,
Text,
TextInput,
TouchableHigh
浏览 26提问于2019-08-24得票数 0
1回答
在我的场景中有两个视图。当加载组件时，在单击TextInput后不需要第二视图，需要在从第二个视图中选择值后打开第二个视图，选择的值应该在第一个视图中填充，TextInput之后，secondView应该关闭，我可以使用react.js实现相同的效果，但使用react本机无法实现相同的效果。
var ViewDisplay = React.createClass({
componentDidMount(){
this.refs.secondView.getDOMNode().style.display="none";
},
clickHa
浏览 2提问于2015-11-28得票数 1
23回答
我是React Native的新手，我想知道如何隐藏/显示组件。
下面是我的测试用例：
<TextInput
onFocus={this.showCancel()}
onChangeText={(text) => this.doSearch({input: text})} />
<TouchableHighlight
onPress={this.hideCancel()}>
<View>
<Text style={styles.cancelButtonText}>Cancel</Te
浏览 168提问于2015-05-16得票数 179
回答已采纳
你好，这是我的代码。当我试图填充文本框时，错误出现了，即('this.setState不是一个函数。(在this.setState({emal:email)} this.setState被低估“)。
这里是我的代码：
导入反应从‘反应’；导入{图像，平台，ScrollView，StyleSheet，文本，TouchableOpacity，视图，TextInput，TouchableHighlight，警报
}从“反应-本地”开始；
导出默认函数LoginScreen() {
onClickListener = (viewId) => {
Alert.alert(
浏览 4提问于2019-11-22得票数 0
回答已采纳
我不能让这个工作，我已经交叉检查了所有的参考资料，但它没有帮助。以下是视图的所有代码。
我不确定我错过了什么，需要所有的依赖。
var React = require('react-native');
var Delivery = require('./Delivery');
var {
View,
Text,
StyleSheet,
TouchableHighlight,
} = React;
class ListItem extends React.Component{
showDetails(){
浏览 2提问于2015-05-06得票数 6
回答已采纳
2回答
我正在尝试创建一个登录按钮，该按钮导航到另一个页面，但我一直收到“导航”未定义的错误。
下面是错误的屏幕截图：
--这是应用程序组件：
export default function App({navigation}) {
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<Image
source={logo}
style={styles.stretch}
浏览 4提问于2020-07-22得票数 0
回答已采纳
2回答
反应中的渲染-本机
、、、
我是相对较新的反应本土化，并在一般情况下，建立任何一个UI。我想知道什么时候在编写应用程序时使用render{}函数是合适的。我问这个问题是因为我想知道这个应用程序的效果。例如，如果我创建一个<LinkedIcon>组件并试图在一个屏幕上拥有大量的组件，那么每个点都应该调用render。否则我会怎么做。
示例代码：
import React, { Component } from "react";
import { Linking, View, TouchableHighlight } from "react-native";
浏览 0提问于2019-06-13得票数 0
回答已采纳
我正在使用一个自定义组件，并努力为其添加onPress功能。我只想向组件添加一个onPress标记，并将函数绑定到该标记。但似乎找不到该怎么做的地方。
不过，我也尝试过只使用TouchableHighlight。当我这样做的时候，整个元素就消失了。我认为它仍然呈现，因为它仍然记录自定义组件已经创建。但是我不知道如何更改样式，使自定义组件仍然显示在视图中……
下面是我的代码：
<TouchableHighlight>
<CustomEle
thumbnailSource={{ uri: 'http://i.imgur.com/W3LKLla.png?bu
浏览 0提问于2016-11-19得票数 2
以下组件不会显示任何内容，也不会触发错误或警告。知道为什么吗？
class Main extends Component {
render() {
return (
<View>
<TouchableHighlight
onPress={...}
style={styles.main}
>
<Text>
Some text
</Text>
</TouchableH
浏览 3提问于2016-12-03得票数 0
回答已采纳
1回答
试图让模式工作在我的反应本地应用程序。我想要更多的页面显示更多的选项模式。我已经做了以下尝试，将模式放在更多的菜单页面。我目前遇到的错误是：
MoreMenu.js
import React, { Component } from 'react';
import { Modal, Text, TouchableHighlight, View } from 'react-native';
class MoreMenu extends Component {
state = {
modalVisible: false,
}
set
浏览 1提问于2017-01-18得票数 0
回答已采纳
我正在尝试导航到一个我没有用createBottomTabNavigation定义的屏幕，因为我不希望它显示在底部的选项卡导航上。 为了尝试这样做，我单独创建了组件： class SingleScreen extends React.Component {
render() {
return (
<View>
<Text>This is sigle screen</Text>
</View>
);
}
} 要导航到此屏
浏览 12提问于2019-04-15得票数 0
我正在使用react本机，特别是使用navigator组件。我有一个简单的登录场景，在按下按钮后，我希望被重定向到另一个页面。
我不明白为什么当我按下按钮时，我又得到了同样的场景。我没有去MainScreen，而是再次被路由到LoginScreen。
index.ios.js
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
Navigator,
} = React;
var
浏览 4提问于2015-11-12得票数 0
回答已采纳
在我的上，我最初是在加载SceneA，它只显示一个文本"Click“。单击此按钮时，我希望加载一个完全不同的屏幕(SceneB)，该屏幕具有完全不同的组件。
我在网上找到的所有示例(如下面的示例)都加载了一个完全相同的组件，但值不同的场景。在我的例子中，这是一个完全不同的布局。如何导航到新屏幕(SceneB)？
它基本上相当于Android上的一个新活动，同时传递一些数据。任何指示都将不胜感激。
index.android.js
import React, { Component } from 'react';
import { AppRegistry, Navigat
浏览 1提问于2016-12-05得票数 1
回答已采纳
1回答
我用的是反应导航。我把你引到录音插入页后的对话。我提供自动更新时，我重定向。我在发送一个参数。但这不管用。我不知道我在哪里搞错了。
我知道这个错误。
不起眼的类型。TypeError: s.handleRefresh不是一个函数。(在's.handleRefresh()‘中，'s.handleRefresh’是未定义的
LeadDetail.js Page
static navigationOptions = ({ navigation }) => {
const { params = {} } = navigation.state;
浏览 0提问于2019-05-29得票数 1
我是新来的，我的第一个项目，我有一个登录屏幕，当我按下TouchableHighlight，我需要打开另一个屏幕，但问题是，我未能使函数从登录到第二个屏幕，这是我的代码。
Login.js
import React, { Component } from 'react';
import { AppRegistry, Text,SecureView ,Button,Image,TextInput,StyleSheet,View,NavigatorIOS,TouchableHighlight} from 'react-native';
require(
浏览 2提问于2016-11-18得票数 0
如果表单无效，则将TouchableHighlight的disabled属性设置为{!isFormValid()}不会禁用它。
我使用来完成这个任务：
下面是代码片段：
<TouchableHighlight style={[styles.buttonContainer, styles.loginButton]}
onPress={this._onSubmit}
disabled={!this.state.isValid}>
<Text style={styles.l
浏览 39提问于2019-03-24得票数 1
如何通过点击可触摸组件触发另一个可触摸组件的按下事件？谢谢!
例子：-
<TouchableHighlight onPress={this._triggerSecond}>
<Image
style={styles.button}
source={require('./myButton.png')}
/>
</TouchableHighlight>
如果用户将点击第一个TouchableHighlight，那么它应该触发第二个TouchableHighlight。
<TouchableHighlight>
浏览 4提问于2017-04-12得票数 3
回答已采纳
我正在开发一个应用程序，用来拍摄带有反光本机相机库的个人资料图像。该应用程序没有录音功能。因此，它将不需要音频许可。但是RNCamera要求“录制音频”许可。那么，如何从我的应用程序中删除该权限。
请帮助我，(事先谢谢)。
我不想出现询问音频录制权限的对话框，如图1所示
这里是我的代码：
<RNCamera
ref={cameraRef}
type={cameraType}
ratio={'4:3'}
style={styles.preview}
captureAudio={false}
浏览 8提问于2022-08-30得票数 0
回答已采纳
我正在使用一个带有数据源的ListView，它从对服务器的rest调用中获取其数据源。
renderRow(rowData){
var imageURL = rowData.banner;
return (
<View>
<Text >{rowData.name}</Text>
<Image
style={{width: 80, height: 80}}
source={{uri: imageURL, width: 400, height: 400
浏览 2提问于2017-01-17得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
