react native TouchableHighlight have no behavior when press to open a another screen

Question

Thanks for your reading,I am a beginner into React Native,I find a similar question title on this site, but my question is different from that.

I use TouchableHighlight to press to open a new screen,I have succeeded. But the button did not change color. is that normal?

There are some of my try:

I try to use TouchableOpacity:The button will change it opacity and then open new screen
I also try to use TouchableNativeFeedback:The button behaves normally once，when i tap second time it has no behavior unless i have a long press.
when i use the button to do something else, not to open a new screen, it behaves correctly.

Here is my code:

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
    },
    
})

I use: "react": "15.4.2", "react-native": "0.41.2", platform：android 6.0

score 3 · Answer 1 · answered Apr 02 '19 at 11:22

3

Adjust "delayPressIn" props in TouchableHighlight to 0 and everything work as expected.

answered Apr 02 '19 at 11:22

user8637708

3,303
2
13
15

score 1 · Answer 2 · answered Feb 23 '17 at 08:49

1

if you want change color of TouchableHighlight when pressed you need to add underlayColor in props

answered Feb 23 '17 at 08:49

Fantasim

876
1
12
32

1

Think you for your answer,I add underlayColor and try again,but have no effect. I open Debug JS Remotely,when it runs slowly,the color really changed.so, maybe i tap too fast or i can try adding a delay time to open – user7609090 Feb 23 '17 at 09:23

react native TouchableHighlight have no behavior when press to open a another screen

2 Answers2