如何在React native android中使用TouchableNativeFeedback？

Question

我在使用此組件時收到警告。嘗試將此組件用作按鈕。我嘗試要求（'TouchableNativeFeedback'）但沒用。我也嘗試npm安裝TouchableNativeFeedback，但失敗了。它應該如何被納入我反應的原生android代碼？

{ 
    var TouchableNativeFeedback= require('TouchableNativeFeedback'); 
    var Button= require('react-native-button'); 
    var { 

     AppRegistry, 
     StyleSheet, 
     Text, 
     View, 
     Image, 
     TouchableNativeFeedback, 

    } = React; 

    var AwesomeProject = React.createClass({ 
     render: function() { 

     return (

      <View style={styles.container}> 

      <Text style={styles.welcome}> 
       My first App 
      </Text> 
      <Text style={styles.instructions}> 
       we should get started 
      </Text> 
      <Text style={styles.instructions}> 
       Nice!! 
      </Text> 
      <Image source={require('./abc.png')} style={styles.img} > 
      <Text style={styles.welcome}> Inside an image! </Text> 
      </Image> 
      <TouchableNativeFeedback 
      style={styles.img} > 
       <View> 
       <Text style= {styles.instructions}> 
       Button! 
       </Text> 
       </View> 
      </ TouchableNativeFeedback>  
      <Button style={styles.img} onClick="this.butclick"> 
      <View> 
      <Text style={styles.instructions}> 
      This is a Button 
      </Text> 
      </View> 
      </Button> 


      </View> 

     ); 
     } 
    }); 

} 

Answer 1

require沒有必要。 TouchableNativeFeedback就像文本，圖像或視圖。

var Button= require('react-native-button'); 
var { 

    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    Image, 
    TouchableNativeFeedback, 

} = React; 

var AwesomeProject = React.createClass({ 
    render: function() { 

return (

    <View style={styles.container}> 

    <TouchableNativeFeedback 
    style={styles.img} > 
     <View> 
     <Text style= {styles.instructions}> 
     Button! 
     </Text> 
     </View> 
    </ TouchableNativeFeedback>  
    </View> 

); 
} 
}); 

Answer 2

它可以像這樣實現，請參閱react-native documentation瞭解更多功能。

​ <TouchableNativeFeedback 
    background={TouchableNativeFeedback.Ripple('red')}> 
    <View style={styles.view}> 
     <Text style={style.text}>Text Here</Text> 
    </View> 
    </TouchableNativeFeedback> 

Answer 3

最佳的做法是使用TouchableNativeFeedback.Ripple是首先檢查設備的API版本，因爲這個背景類型可以在Android API級別21+。

import { Platform } from 'react-native'; 

<TouchableNativeFeedback 
    onPress={this.follow} 
    background={ 
    Platform.Version >= 21 ? 
     TouchableNativeFeedback.Ripple('rgba(0,0,0,.2)', true) : 
     TouchableNativeFeedback.SelectableBackground() 
    } 
> 

Answer 4

首先，你需要導入相應的依賴（TouchableNativeFeedback）：

import { TouchableNativeFeedback, View, Text } from 'react-native'; 

在此之後，你可以使用它作爲：

<TouchableNativeFeedback onPress={() => this._onPressButton()} key={index}> 
    <View> 
     <Text>Click Me</Text> 
    </View> 
</TouchableNativeFeedback> 

注意：確保在您的代碼中添加相應的點擊功能（this._onPressButton（）），否則您會收到錯誤消息。