Question

我有可触摸原生，内部可触摸我有图像和印刷机像这样

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

当我试图运行应用程序时，我收到此错误

React.Childeren.only expected to receive a single React element child

如何解决这个问题？

Answer 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>

Answer 2

如果

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

不起作用，您应该将您的图片放入<view>

Answer 3

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

<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

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

3 个答案: