は、ネイティブTouchableHighlightが、私はこのコードでログインページを構築しようとしている

Question

に動作していないリアクト：

<View style={styles.formContainer}> 
    <TouchableHighlight onPress={this.props.authentication}> 
     <Icon.Button name="facebook" style={styles.loginIconButton}> 
      <Text style={styles.loginButtonText}>Login with Facebook</Text> 
     </Icon.Button> 
    </TouchableHighlight> 
</View> 

それは触れることができる子は、ネイティブコンポーネントにネイティブまたは前方setNativePropsでなければなりません "与え、これを実行しています、他の記事で示唆したように、私は、ビューにアイコンを包ん：

<TouchableHighlight onPress={this.props.authentication.bind(this)}> 
    <View> 
     <Icon.Button name="facebook" style={styles.loginIconButton}> 
      <Text style={styles.loginButtonText}>Login with Facebook</Text> 
     </Icon.Button> 
    </View> 
</TouchableHighlight> 

今のプレスイベントでは、それ以上トリガされません。しかし、もし私がIcon.Buttonタグを取り除いてテキストだけを残してしまえば、うまくいきます。このレイアウトを修正するにはどうしたらいいですか？

Answer 1

外部TouchableHighlightを削除して、onPressイベントをIcon.Buttonに追加してみませんか？ https://github.com/oblador/react-native-vector-icons/blob/master/lib/icon-button.js

試してください：あなたがここにIcon.Buttonのためのコードに見れば

、あなたが実際にそれが要素の固有の部分としてTouchableHighlight要素を作成していることがわかります（私はあなたには、react-native-vector-iconsを使用していることを推測しています） onPressをIcon.Buttonに移動すると、不要なラッピングビューが削除され、どのように動作するかお知らせください。