1

感谢您的阅读，我是 React Native 的初学者，我在这个网站上找到了类似的问题标题，但我的问题与此不同。

我用TouchableHighlight按打开一个新屏幕，我成功了。但是按钮没有改变颜色。这正常吗？

我有一些尝试：

  • 我尝试使用 TouchableOpacity:The button will change it opacity and then open new screen
  • 我也尝试使用 TouchableNativeFeedback：该按钮一次行为正常，当我第二次点击时它没有任何行为，除非我长按。
  • 当我使用按钮做其他事情时，而不是打开新屏幕，它的行为正确。

这是我的代码：

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  Image,
  TouchableHighlight,
} from 'react-native';

import MyInfoOrder from './MyInfoOrder';

export default class MyInfo extends React.Component{
    _onPress(){
        console.log("tap");
    }
    _onPressMessage(){
        const { navigator } = this.props;
        if(navigator) {
            navigator.push({
                name: 'order',
                component: MyInfoOrder,
            })
        }
    }
    render(){
        return(
            <View style={styles.btnGroup}>
                        <TouchableHighlight style={[styles.btnItem]} onPress={this._onPressMessage.bind(this)}>
                            <View style={styles.btnItemView}>
                                <Image source={require('../images/myinfo/message.png')} style={styles.btnItemViewImage} />
                                <Text style={styles.btnItemViewText}>MyTest</Text>
                                <Image source={require('../images/more.png')} style={styles.btnItemViewArrow} />
                            </View>
                        </TouchableHighlight>
                        <View style={styles.lineStyle}></View>
                        <TouchableHighlight style={[styles.btnItem]} onPress={this._onPress}>
                            <View style={styles.btnItemView}>
                                <Image source={require('../images/myinfo/friends.png')} style={styles.btnItemViewImage} />
                                <Text style={styles.btnItemViewText}>MyTest</Text>
                                <Image source={require('../images/more.png')} style={styles.btnItemViewArrow} />
                            </View>
                        </TouchableHighlight>
                        <View style={styles.lineStyle}></View>
                        <TouchableHighlight style={[styles.btnItem]} onPress={this._onPress}>
                            <View style={styles.btnItemView}>
                                <Image source={require('../images/myinfo/col.png')} style={styles.btnItemViewImage} />
                                <Text style={styles.btnItemViewText}>MyTest</Text>
                                <Image source={require('../images/more.png')} style={styles.btnItemViewArrow} />
                            </View>
                        </TouchableHighlight>
                    </View>
        )
    }
}

const styles = StyleSheet.create({
    
    btnGroup:{
        marginBottom:30,
        borderRadius:10,
        backgroundColor:'#FFFFFF',
    },
    btnItem:{
        height:104,
        borderRadius:10,
    },
    btnItemView:{
        borderRadius:10,
        backgroundColor:'#FFFFFF',
        height:106,
        flexDirection:'row',
        alignItems:'center',
    },
    btnItemViewImage:{
        width:48,
        height:48,
        marginLeft:24,
        marginRight:24
    },
    btnItemViewText:{
        flex:1,
        fontSize:32,
        color:'#333333',
    },
    btnItemViewArrow:{
        width:30,
        height:30,
        marginRight:30
    },
    
})

我使用：“react”：“15.4.2”，“react-native”：“0.41.2”，平台：android 6.0

4

2 回答 2

3

将 TouchableHighlight 中的“delayPressIn”道具调整为 0，一切都按预期工作。

于 2019-04-02T11:22:58.833 回答
1

如果要在按下时更改 TouchableHighlight 的颜色，则需要 在道具中添加underlayColor

于 2017-02-23T08:49:15.827 回答