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

私はReact Nativeの初心者ですが、私はこのサイトで同様の質問タイトルを見つけましたが、私の質問はそれとは異なります。ネイティブTouchableHighlightと反応して別の画面を開くときに何もしません

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

出典

2017-02-23 user7609090

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

出典

2017-02-23 08:49:15 Fantasim

あなたの答えを考えてみましょう。私はunderlayColorを追加してもう一度やり直しても効果はありません。デバッグJSをリモートで開くと、ゆっくりと実行されます。色が実際に変更されました。おそらくタップが速すぎるか、遅延時間を追加して開くことができます – user7609090

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

答えて

関連する問題