réagir natif TouchableHighlight ne pas avoir de comportement lorsque vous appuyez sur pour ouvrir un autre écran

Question

Merci pour votre lecture, je suis un débutant dans React Native, je trouve un titre de question similaire sur ce site, mais ma question est différente de celle. J'utilise TouchableHighlight pour appuyer sur pour ouvrir un nouvel écran, j'ai réussi. Mais le bouton n'a pas changé de couleur. est-ce normal?

Il y a une partie de mon essai:

• J'essaie d'utiliser TouchableOpacity: Le bouton changer l'opacité et puis ouvrez nouvel écran
• J'essaie aussi d'utiliser TouchableNativeFeedback: Le bouton se comporte normalement une fois, quand je tape la deuxième fois, il n'a pas de comportement, sauf si j'ai une longue pression.
• Lorsque j'utilise le bouton pour faire autre chose, pour ne pas ouvrir un nouvel écran, il se comporte correctement.

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

J'utilise: "réagir": "15.4.2", "réagissent-native": "0.41.2" , plate-forme: Android 6.0

Answer 1

si vous voulez changer la couleur de TouchableHighlight lorsque vous appuyez, vous devez ajouter underlayColor dans les accessoires