react-native如何将图像和onpress添加到可触摸中答案

【问题标题】：react-native how to add image and onpress into touchablereact-native如何将图像和onpress添加到可触摸中
【发布时间】：2016-11-23 09:43:57
【问题描述】：

我在 react native 中有可触摸的，在可触摸的内部我有这样的图像和新闻

 <TouchableHighlight >
  <Image style={styles.imagestyle}
  source={require('./ic_action_name.png')} />
  onPress={() => this.moveToAddNewCustomer()}>
 </TouchableHighlight>

当我尝试运行应用程序时，出现此错误

React.Childeren.only 期望接收单个 React 元素子

如何解决这个问题？

【问题讨论】：

标签： android react-native

【解决方案1】：

你需要这样做：

<TouchableHighlight onPress={() => this.moveToAddNewCustomer()}>
    <Image style={styles.imagestyle} source={require('./ic_action_name.png')} />
</TouchableHighlight>

或

<TouchableOpacity onPress={()=>this.moveToAddNewCustomer()}>
    <Image style={styles.imagestyle} source={require('./ic_action_name.png')} />
</TouchableOpacity>

【讨论】：

此解决方案不适用于 iOS。我正在使用 0.63。可能是什么问题？
@Mighty 我建议你使用 react-native-material-ripple 或 TouchableWithoutFeedback。

【解决方案2】：

如果

TouchableHighlight onPress={() => this.moveToAddNewCustomer()}>
    <Image style={styles.imagestyle} source={require('./ic_action_name.png')} />
</TouchableHighlight>

没用，你应该把你的图片放在<view>

【讨论】：

【解决方案3】：

默认情况下，像 react.js 这样的 react native 中的任何视图都没有附加点击或事件。主要有两个专门用于处理触摸事件的 View。它们是TouchableOpacity 和TouchableHighlight。您可以通过使用TouchableOpacity 或TouchableHighlight 包装您的Image 组件来解决您的问题。

<TouchableHighlight onPress={() => this.moveToAddNewCustomer()}>
    <Image style={styles.imagestyle} source={require('./ic_action_name.png')} />
</TouchableHighlight>

https://reactnative.dev/docs/touchablehighlight

https://reactnative.dev/docs/touchableopacity

【讨论】：

【解决方案4】：

我通过使用“TouchableWithoutFeedback”解决了我的问题

<TouchableWithoutFeedback
        onPress={() => {
           this.moveToAddNewCustomer()}
        }}
      >
        <Image
          style={styles.newImage}
          // resizeMode="contain"
          source={require("~/assets/images/test123.png")}
        />
      </TouchableWithoutFeedback>```

【讨论】：