【问题标题】: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>
    

    没用,你应该把你的图片放在&lt;view&gt;

    【讨论】:

      【解决方案3】:

      默认情况下,像 react.js 这样的 react native 中的任何视图都没有附加点击或事件。主要有两个专门用于处理触摸事件的 View。它们是TouchableOpacityTouchableHighlight。您可以通过使用TouchableOpacityTouchableHighlight 包装您的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>```
        

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2021-12-17
          • 1970-01-01
          • 2020-12-10
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2022-08-03
          • 1970-01-01
          相关资源
          最近更新 更多