Question

我在使用此组件时收到警告。尝试将此组件用作按钮。我试过require（'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

可以像这样实现，有关更多功能，请参阅react-native documentation。

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

Answer 2

使用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 3

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 4

首先，您需要导入相应的依赖项（TouchableNativeFeedback）：

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

在此之后，您可以将其用作：

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

注意：确保在代码中添加相应的单击功能（this._onPressButton（）），否则会出错。

如何在React原生android中使用TouchableNativeFeedback？

4 个答案: