ネイティブTouchableHighlightと反応して別の画面を開くときに何もしません

Question

私はReact Nativeの初心者ですが、私はこのサイトで同様の質問タイトルを見つけましたが、私の質問はそれとは異なります。

TouchableHighlightを使用して、新しい画面を開くために、私は成功しました。しかし、ボタンは色を変えなかった。それは普通ですか？

私の試みのいくつかあります。

• 私はTouchableOpacityを使用しよう：ボタンが
• をそれに不透明度を変更し、新しい画面を開きます。私はまた、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 
   
      }, 
   
      
   
  })

  ：ここ

は私のコードである "15.4.2"、 "反応するネイティブ"： "0.41.2" 、 プラットフォーム：アンドロイド6.0

Answer 1

あなたが追加する必要があるときにTouchableHighlightの色を変更したい場合 underlayColor小道具