TouchableHighlight和TouchableOpacity在render()上突出显示
TouchableHighlight和TouchableOpacity是React Native中常用的两个组件，用于在用户触摸时提供视觉反馈。
- TouchableHighlight（触摸高亮）：
- 概念：TouchableHighlight是一个包装了子组件的容器，当用户按下时，会在子组件上添加一个高亮效果。
- 分类：属于Touchable组件的一种，用于处理用户的触摸事件。
- 优势：可以自定义高亮效果，支持自定义样式和自定义触摸事件处理。
- 应用场景：适用于需要在用户触摸时提供视觉反馈的场景，如按钮、链接等。
- 推荐的腾讯云相关产品：无
- TouchableOpacity（触摸透明度）：
- 概念：TouchableOpacity是一个包装了子组件的容器，当用户按下时，会降低子组件的不透明度，实现点击效果。
- 分类：属于Touchable组件的一种，用于处理用户的触摸事件。
- 优势：可以自定义透明度变化效果，支持自定义样式和自定义触摸事件处理。
- 应用场景：适用于需要在用户触摸时提供视觉反馈的场景，如按钮、链接等。
- 推荐的腾讯云相关产品：无
总结：TouchableHighlight和TouchableOpacity是React Native中用于处理用户触摸事件并提供视觉反馈的组件。TouchableHighlight通过添加高亮效果，而TouchableOpacity通过降低透明度来实现点击效果。它们都适用于需要在用户触摸时提供视觉反馈的场景，如按钮、链接等。
注意：本答案中没有提及具体的腾讯云产品和产品介绍链接地址，因为TouchableHighlight和TouchableOpacity是React Native内置的组件，与云计算领域无直接关联。
相关·内容
我正在尝试实现一个“按下并保持”记录按钮，该按钮在发布时停止录制，但是我找不到在新闻事件结束时触发的事件，如下面的onPressRelease：
render() {
return (
<TouchableHighlight onPress={this.recordStart} onPressRelease={this.recordStop}>
<Image source={recordIcon} />
</TouchableHighlight>
);
}
TouchableOpacity、To
浏览 0提问于2018-04-04得票数 1
回答已采纳
3回答
如何根据用户正在运行的平台呈现不同的JSX？
import React, { Component } from "react";
import PropTypes from "prop-types";
import { StyleSheet, TouchableOpacity, TouchableHighlight, Platform, Text, Image } from "react-native";
export default class RoundButton extends Component {
constructor(p
浏览 0提问于2018-08-13得票数 0
回答已采纳
2回答
我正在开发一个react原生应用程序。我必须显示多个图像。我的代码是： render() {
if (!this.props.data) {
return(<Text style={styles.noIMG}>Keine Bilder vorhanden</Text>)
}
return (
<View>
<View style={styles.view}>
{
(
this.props.data == '' ||
浏览 27提问于2019-09-24得票数 0
我已经创建了react原生模式，但是当用户尝试点击它时，TouchableOpacity和按钮没有被点击，这是为什么呢？ 代码：(第1部分) <Modal
animationType="slide"
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => {
Alert.alert('Modal has been closed.');
浏览 144提问于2019-03-28得票数 24
1回答
无法在警报框中显示值
、、、
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Navigator,
TouchableOpacity,
Image,
TextInput,
TouchableHighlight,
Alert
} from 'react-native';
import Button from 'rea
浏览 2提问于2017-02-28得票数 1
回答已采纳
1回答
我使用的反应-本机-滑动-列表-视图api用于滑动，我想滑动当点击按钮undo.When，我点击删除按钮，它是工作的，但对于按钮撤消，而不是工作。代码是
import React, {
Component,
} from 'react';
import {
AppRegistry,
ListView,
StyleSheet,
Text,
TouchableOpacity,
TouchableHighlight,
View,
Alert,
Dimensions
} from 'react-na
浏览 0提问于2017-04-18得票数 0
回答已采纳
我试图隐藏/显示一个按钮在一个反应本机工具栏的标题。一旦用户登录，我希望按钮显示。我得到的错误是未定义的不是this.state.status上的对象。如何在工具栏中获得状态？
export default class TestSC extends React.Component {
constructor(){
super();
this.state ={
status:false
}
}
static navigationOptions = ({navigation})=> {
return {
title: &#
浏览 1提问于2018-03-11得票数 1
回答已采纳
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
2回答
这快把我逼疯了，我找不到问题所在。我试图有条件地呈现一个图像组件，但它抛出了Invariant Violation: Text strings must be rendered within a <Text> component。在语句所在的位置甚至不使用文本字符串。
render() {
return (
<View style={newsItemStyles.wrapper}>
{this.state.isLoading && (
<View style={load
浏览 16提问于2020-02-04得票数 0
回答已采纳
我想解析一个JSON文件并在屏幕上显示一些数据。我可以使用以下代码显示所有数据，但我只想显示entryDate和sysol。是否可以在_onPressButtonGET()中使用for循环并仅在其中显示数据？
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Navigator,
TouchableOpac
浏览 6提问于2017-03-14得票数 1
1回答
我正在尝试在两个场景之间导航，使用的是react本地的Navigator。下面是场景“示例”、"LightboxView1“的可塑性码。我在第二幕"LightboxView1“里放了一张照片。当我运行代码时，图像不会显示。
另外，如果我试图将图像放到第一个场景的照明箱中，我会得到一个错误"react.children.only期望接收一个单独的react元素子“
var Example = React.createClass({
navigate(id) {
this.props.navigator.push({
id: id,
浏览 2提问于2017-04-21得票数 0
回答已采纳
render(){
const { List: list } = this.state.data
const renderList = list && list.map(({date, time, minute}) => {
return (
<View key={date+time+minute}>
<Text>date:{date}</Text>
<Text>time:{time}</Text>
<Text>minut
浏览 2提问于2017-03-17得票数 1
回答已采纳
1回答
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Navigator,
TouchableOpacity,
Image,
TextInput,
TouchableHighlight,
Alert
} from 'react
浏览 1提问于2017-03-08得票数 0
我在类中有一个方法，当我按下导航选项中的按钮时，我需要访问该方法。
在GitHub对本机问题做出反应之后，我遵循了这种方法。
static navigationOptions = ({ navigation }) => ({
title: i18n.t('viewben'),
header: ({ state }) => ({
right: <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
浏览 1提问于2018-02-12得票数 0
1回答
我有一个显示图像的模式，我正在使用一个图像查看器，它将为我显示图像，也可以缩放等。因为我不能直接控制如何设置模式的样式，图像查看器给出了一个选项，给renderHeader的react元素，这是我的代码如下
class EventDetailsScreen extends Component {
constructor(props){
super(props);
this.state = {
token: null,
event: null,
eventImages: [],
isModalVisible: false,
浏览 1提问于2018-11-23得票数 2
我正在使用React-Native构建一个AndroidTV应用程序。
我指的是 (在Android标签页中)。
我尝试在元素：TouchableHighlight / TouchableOpacity上使用touchableHandleActivePressIn方法
class MyComponent extends Component {
myMethod = () => {
console.log('Working');
}
render() {
return (
<View>
<Tou
浏览 0提问于2018-07-20得票数 3
2回答
我正在做一个模态，当用户单击一个或多个项目时会弹出，在那里，用户将看到他/她单击的项目的详细信息。基本上，我想把清单上的项目传递给模态。
我实际上已经完成了弹出的模式，现在我必须显示的细节，如菜单描述和菜单价格。我已经在堆栈溢出中找到了一篇文章，我跟踪了里面的所有内容，但是关于“id "，我遇到了一个错误，我不知道如何修复它。
这是我的密码
Details.js
import React, {Component} from 'react';
import {Text, TouchableHighlight, View,
StyleSheet, Platform, Fla
浏览 2提问于2018-05-19得票数 3
回答已采纳
我正在尝试上传我用base64编码的图像，但它似乎没有将状态保存到应用程序中，所以我可以将图像上传到我的服务器。状态似乎只保存在函数中，而不保存到整个组件。对我做错了什么有什么建议吗？
_selectImage(uri) {
NativeModules.ReadImageData.readImage(uri, (image) => {
this.state = {
selected: image
};
console.log(this.state)
});
}
render() {
retu
浏览 0提问于2016-04-19得票数 0
1回答
响应tvOS中未更改的本机焦点
、、、、
目前，我正在为电视平台开发，我可以在电视上播放视频。
我在组件中添加了，并且能够打开/关闭抽屉，但是无法更改抽屉内的焦点。
这是抽屉代码：
render() {
return (
<Container hasTVPreferredFocus={true}>
<Content
bounces={false}
style={{ flex: 1, backgroundColor: '#
浏览 1提问于2018-08-30得票数 14
有一个组件，它封装了<TouchableNativeFeedback>及其对iOS或旧版本安卓的后遗症。
在它的文档中有一个fallback属性：
回退--如果TouchableNativeFeedback不可用(在iOS和Android <= 20 /Android5.0上)，则使用该支柱中指定的组件。默认为TouchableOpacity。
通常情况下，<TouchableOpacity />是一种很好的方法作为后盾，但有时我希望调整iOS的默认值，转而使用<TouchableHighlight />。，我该怎么做？
我尝试添加<To
浏览 0提问于2018-02-17得票数 0
1回答
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Navigator,
TouchableOpacity,
Image,
TouchableHighlight,
Alert,
TextInput
} from 'react-native';
import Button from 'react-native-button'
import {Actions} from 'reac
浏览 9提问于2017-03-15得票数 0
好吧，所以我有点反应了，我制作了一个示例登录屏幕，如下所示：
export default class App extends Component{
constructor(props){
super(props);
this.state = {
login: '',
password: '',
// exists: false,
Button: './submitButton.png',
}
浏览 0提问于2018-10-24得票数 0
回答已采纳
1回答
我正在使用React Native核心Navigator组件，但在按下导航栏中的按钮时，我无法弄清楚如何在组件之间传递数据。以下是我的设置的一些示例代码。
const NavigationBarRouteMapper = {
Title: (route, navigator) => {
let title;
switch (route.component.displayName) {
case 'FirstScreen':
title = 'First Screen';
break;
浏览 0提问于2015-11-25得票数 2
大家好，我正在做这个原生的react项目，我遇到了一个关于scrollView组件和按钮位置的问题。所以基本上我想要有两个按钮，用来确认或取消我在scrollView中的选择，在滚动视图的下面，每个按钮都填充了一半的宽度。按钮和滚动视图都可以在模式中找到。 我试过了所有我能想到的柔性框和高度的组合，但都不起作用，而且包括按钮在内的部分的高度仍然比我想要的要大得多，按钮也不是并排的。 这是有问题的组件： import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpac
浏览 11提问于2019-04-10得票数 0
回答已采纳
1回答
只是试图得到当前的指数，可触摸的突出显示，按下。由于某种原因，它只返回数组中最高的数字。有什么想法吗？
render: function() {
var images = [], i = 0;
for(i=0; i<this.props.picturesList.length; i++){
var currentIndex = i;
images.push(
<TouchableHighlight
key={'c' + i}
on
浏览 0提问于2016-02-23得票数 2
回答已采纳
我正在使用一个自定义组件，并努力为其添加onPress功能。我只想向组件添加一个onPress标记，并将函数绑定到该标记。但似乎找不到该怎么做的地方。
不过，我也尝试过只使用TouchableHighlight。当我这样做的时候，整个元素就消失了。我认为它仍然呈现，因为它仍然记录自定义组件已经创建。但是我不知道如何更改样式，使自定义组件仍然显示在视图中……
下面是我的代码：
<TouchableHighlight>
<CustomEle
thumbnailSource={{ uri: 'http://i.imgur.com/W3LKLla.png?bu
浏览 0提问于2016-11-19得票数 2
我在React原生中为FlatList使用了TouchableHighlight。这里用来显示API返回的城市。但是，当平面列表中的每一项都被触摸时，只有第一项被忽略。但当我按键时，除第一项外的其他项都会突出显示。另外，我是在我的设备上运行应用程序，而不是在模拟器中。
代码
export default class SearchResultsList extends Component {
render() {
return (
(this.props.list &&
<List containerStyle={{ bo
浏览 0提问于2018-07-22得票数 0
我已经创建了一个MyAlertBox.js文件。用于测试，如下所示。
render() {
return (
<MyAlertBox title="Testing" message="Worked?" show={true} />
);
}
在Home.js内部。MyAlertBox如下所示。
export default class MyAlertBox extends Component {
constructor(props) {
super(props
浏览 2提问于2019-08-05得票数 0
回答已采纳
1回答
我在我的应用程序中使用了反应本机摄像头模块。这个例子是可以的。我的问题是在另一页上显示我的图像。这是我的密码：
'use strict';
var React = require('react-native');
var styles = require('./common/styles.js');
var {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TouchableHighlight,
TouchableOpacity,
Navigator,
} = Reac
浏览 4提问于2015-12-02得票数 1
回答已采纳
我想获得一些api中的名称，这个api返回一个json，我想让map ()来显示我需要的所有名称，当我在console.warn ()中显示这个map ()时，它会返回完全正确的结果，但是当我试图将结果传递到一个状态并尝试在render ()中使用它时，会出现一个错误
'TypeError:未定义不是一个函数(接近.this.state.fantasyName.map .)错误
我哪里出问题了？
以其他方式尝试更多的空白返回，在console.warn ()中更少
componentDidMount() {
AsyncStorage.getItem(
浏览 1提问于2019-09-13得票数 0
回答已采纳
因此，我在react-native中使用可按压组件，而不是使用Button，因为我听说它在样式方面有很多限制。我也尝试过使用TouchableHighlight，但对我来说效果不是很好，因为我的组件已经调整了一些样式和位置
class randomComponent extends Component {
render() {
return (
<Pressable>
<Text>Hello World</Text>
</Pressable>
)
浏览 0提问于2021-10-05得票数 0
我想将我的导航菜单提取到一个自定义组件中，这样我就不必不断地重写代码。下面是我的简单dashboard.js
import React, { Component } from 'react';
import {
StyleSheet,
View,
Text,
Navigator,
TouchableHighlight,
TouchableOpacity,
} from 'react-native';
let HeaderMenu = require('../../partials/headerMenu');
c
浏览 0提问于2016-11-04得票数 0
1回答
我创造了反应的模式。我已经添加了过滤器选项图标在右上角，现在当用户点击它应该打开模式。我怎么能这么做？我在navigation.js中添加了选项图标，但是现在如何将它与模式组件连接起来呢？
在下面的代码中，setModalVisible可用在filteroptions.js中，而不是在navigation.js中。
代码：
navigation.js：
Updates: {
screen: UpdatesScreen,
navigationOptions: ({ navigation }) => ({
he
浏览 0提问于2018-11-19得票数 3
回答已采纳
我现在有三个TouchableHighlight按钮，我只想让它们中的一个同时突出显示，并存储它们的状态。
国家：
state = {
selected: null,
};
handleClick函数
_handleClick(flag) {
if (flag == 1) {
this.setState({selected: true});
}
}
三个可触摸的亮点之一
<TouchableHighlight
style={styles.container}
onPress={() => this._handleClick
浏览 1提问于2020-01-20得票数 0
回答已采纳
2回答
我正在尝试创建一个类似于TouchableHighlight的组件，但不是突出显示背景，而是突出显示文本。我需要连接到在用户实际按下的点触发的onPress事件。
我试过使用TouchableWithoutFeedback和onPressIn，但它似乎没有启动。这是我一直在测试的代码。
class TouchableTextHighlight extends React.Component {
constructor (props) {
super(props)
this.state = {
isHighlighted: false
}
}
hig
浏览 2提问于2017-01-04得票数 2
回答已采纳
如何合并类型 type TheseTypes = typeof TouchableNativeFeedback &
typeof TouchableWithoutFeedback &
typeof TouchableHighlight &
typeof TouchableOpacity;
const Button: React.FC<CustomProps> = (props) => {
const ButtonInstance: TheseTypes =
props.highlight
? Tou
浏览 17提问于2020-04-12得票数 0
回答已采纳
我在react native中有这个屏幕
import React, { Component } from 'react';
import { AppRegistry,TouchableOpacity, Text ,Button,Image,TextInput,PropTypes,StyleSheet,View,NavigatorIOS,TouchableHighlight} from 'react-native';
class LoginView extends Component {
render() {
浏览 2提问于2016-11-19得票数 3
1回答
我把这个模型输入到react native中，命名为LoginView.js
"use strict";
import React, { Component } from 'react';
import { AppRegistry,TouchableOpacity, Text ,Button,Image,TextInput,PropTypes,StyleSheet,View,NavigatorIOS,TouchableHighlight} from 'react-native';
class LoginVie
浏览 3提问于2016-11-20得票数 0
回答已采纳
在Reactinative中，至少有三种方法可以生成按钮：TouchableNativeFeedback、TouchableHighlight和TouchableOpacity。还有TouchableWithoutFeedback，文档明确指出您不应该使用它，因为“所有响应按下的元素在触摸时都应该有一个视觉反馈”。
仅限于安卓，“用另一个RCTView实例替换视图”
“向视图层次结构添加视图”
“不改变视图层次结构”。
这三者之间还有什么其他重大差异吗？其中一个是goto组件吗？在什么情况下，您应该在TouchableOpacity上使用TouchableHighlight
浏览 11提问于2016-08-24得票数 117
回答已采纳
我想要这样的输出，每当我按下‘编辑’，它应该显示一些textInput字段。我该如何为它写函数呢？如何将这些textInput值存储在变量中？有没有可能创建一个具有TextInput字段的函数，并通过按“编辑”来调用？谢谢
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity,
TextInput,
TouchableHighlight,
Alert
} from 'react-nat
浏览 2提问于2017-03-01得票数 1
回答已采纳
我有一个TouchableOpacity，当我单击它里面的一个子组件时，它不会执行onPress事件。onpress事件是一个简单的console.log()；
<TouchableOpacity style={{flex: 1}} onPress={this.onPress.bind(this)}>
{this.state.customComponent}
</TouchableOpacity>
如果我单击TouchableOpacity中的空白区域，它将执行onPress。如果我直接单击子组件，它将不会执行。
编辑:我发现了问题所在，这是因为Touchabl
浏览 0提问于2016-02-18得票数 4
我有一个模式，当用户点击“获取GEO”按钮时弹出。在模式是一个按钮，它应该导航到UserScreen，但我得到的错误:无法读取属性‘导航’是未定义的。如果我把按钮放在class WelcomeScreen extends Component中，按钮就能正常工作。
提前谢谢。
代码如下：
WelcomeScreen：
import React, { Component } from "react";
import { TouchableOpacity, TouchableHighlight, Modal, StyleSheet, Text, View, Button, AppRe
浏览 1提问于2018-05-23得票数 0
我面临一个问题，我有一个模块，如果我按下导航标题上的检查图标，我设置为函数的模式将自动弹出。我使用的编程语言是本机反应。我使用了react本机库作为模型，最后使用react导航来创建屏幕导航。
我的目标:当我按标题顶部的检查图标时，模式会在屏幕上自动打开。。
这是我的功能：
PrivacyShow() {
<Modal
animationType="slide"
transparent={false}
visible={true}
onRequestClose={() => {
alert('
浏览 4提问于2020-12-22得票数 1
我想添加pull来刷新，但是我不知道从_Refresh()调用什么。我在另一个页面中有动作、常量和减法。如何调用该api。提前感谢您的帮助。
我想添加pull来刷新，但是我不知道从_Refresh()调用什么。我在另一个页面中有动作、常量和减法。如何调用该api。提前感谢您的帮助。
class HomeworkList extends Component {
constructor(props){
super(props);
this.state = {
getHW : null,
refreshing: false,
appState: AppState.c
浏览 2提问于2017-11-26得票数 3
我想实现这一功能时，用户将点击后退箭头图像按钮进度条指示器将减少，它将显示在旋转木马以前的问题。 我使用' react-native -snap-carousel‘来显示问题和答案的数据，使用'react-native- progress - bar -animated’来显示react-native中的进度条指示器。 请帮助我如何实现这个功能。我是一个新的反应-本机。谢谢你在高级。 ? 下面是一些易于理解的代码 onSnapToItem = (index) => {
console.log("get indexvalue"
浏览 14提问于2020-04-29得票数 0
回答已采纳
如何使一个Flatlist导航到下一个屏幕时，一行被点击在Flatlist中的react本机？
编辑：我在JS文件中发布了所有代码。
这是我的清单代码：
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
FlatList,
Button,
TouchableOpacity,
TouchableHighlight
} from 'react-native'
const Tasks = (props) =>
浏览 2提问于2017-07-31得票数 9
回答已采纳
很乐意利用你的帮助。我在使用react本机的堆栈导航器，但是我已经在标题中提到的错误上被困了一段时间。我使代码成为我所能做的最基本的，但仍然找不出错误。我想是关于this.props的可访问性，但我还不明白。
这是代码：
App.js
import React, {Component} from 'react';
import {AppRegistry,Animated,DeviceEventEmitter,Text,View,StyleSheet,TouchableHighlight,TouchableOpacity,TextInput,Button,Image,Dimens
浏览 0提问于2018-04-10得票数 0
回答已采纳
1回答
我正在开发一个react本机应用程序，并试图了解如何处理react navigation，因为它会影响我的样式。本质上，当我导航到一个页面时，带有标题的react navigation's顶部箭头正在取代我的组件(我希望将我的黑色标题栏向上移动，并在理想情况下使用react导航的箭头)：
我已经以下列方式设置了react导航：
App.js
const ProfileNavigator = createStackNavigator({
//Profile: { screen: Profile},
QR: { screen: GenerateQR
浏览 2提问于2019-12-10得票数 0
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Navigator,
TouchableOpacity,
Image,
TouchableHighlight,
Alert,
TextInput
} from 'react-native';
import Button from 'react-native-button'
import {Actions} from 'reac
浏览 5提问于2017-03-16得票数 2
回答已采纳
3回答
这是我的组件，用于从用户的手机中选择和上传照片。它工作得很好，但当用户打开手机图片库，然后决定取消，并且没有选择任何照片上传时，我会收到如下错误：
“YellowBox.js:82可能未处理的承诺拒绝(id: 0)：错误:用户取消了图像选择”
我不知道在哪里以及如何捕捉和处理错误，有什么帮助吗？
class ProfilePictureHandeler extends Component {
constructor (props) {
super(props)
this.state = {
loading: false,
dp: null
}
}
openPicker () {
t
浏览 0提问于2018-04-17得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
