Question

我一直在尝试使用以下代码创建一个在警报框中显示消息的按钮：

buttonClicked= () => {return alert("clicked")}

<TouchableOpacity onPress={()=>this.buttonClicked()} style={styles.skip}>
 <Text>Skip</Text>
</TouchableOpacity>

但是，单击“跳过”文本不会触发buttonClicked功能。我能够触发该函数的唯一方法是从onPress类中删除了箭头函数。 onPress={this.buttonClicked()} 但是，这导致仅在应用程序首次启动时才触发功能。我不确定自己在做什么错。

代码的所有部分都需要App.js：

import React, { Component } from 'react'
import { Text, View, Image, StyleSheet, TouchableOpacity} from 'react-native'

export default class Tutorials extends Component {
    constructor()
    {
        super();
        this.state={
            currentPage: 1,
            totalPages: 3,
        }
    }

    setCurrentPage = () => {return alert("clicked")}

    renderTutorial = () =>{
        if(this.state.currentPage === 1)
        {
            return(
                <View style={styles.container}>
                    <Image style={styles.arrow} source={require('../../assets/path.png')}/>
                    <Text style={styles.pages}>{this.state.currentPage + ' of ' + this.state.totalPages}</Text>

                    <TouchableOpacity onPress={()=>this.setCurrentPage()} style={styles.skip}>
                        <Text>Skip</Text>
                    </TouchableOpacity>


                    <Text style={styles.header}>Refer to friend</Text>
                    <Text style={styles.paragraph}>Your friend will also receive credits</Text>

                    <TouchableOpacity style={styles.inviteFriendsButton} onPress={()=>alert("clicked!")}>
                        <Image source={require('../../assets/buttonInviteFriends.png')}/>
                    </TouchableOpacity>
                </View>
            );
        }
        if(this.state.currentPage === 2)
        {
            <View>Page 2</View>
        }
        if(this.state.currentPage === 3)
        {
            <View>Page 3</View>
        }
    }


    render() {
        return (
            this.renderTutorial()
        )
    }
}

Answer 1

尝试一下

onPress={this.buttonClicked}

Answer 2

尝试通过以下方式修改代码：

buttonClicked = () => alert("clicked")

<TouchableOpacity onPress={this.buttonClicked} style={styles.skip}>
 <Text>Skip</Text>
</TouchableOpacity>

或者出于测试目的，将其直接插入onPress：

<TouchableOpacity onPress={() => alert("clicked")} style={styles.skip}>
 <Text>Skip</Text>
</TouchableOpacity>

Answer 3

在这种情况下，您应该通过 onPress 道具将要触发的功能更改为

let material = fragList.getMaterial(fragId).clone();
 if (material) {
material.opacity = opacity
material.transparent = true
material.needsUpdate = true
}
    viewer.impl.matman().addMaterial ('myCustomMaterial', material, 
 true);
    viewer.model.getFragmentList().setMaterial(fragId, material);
    viewer.impl.invalidate(true);

Answer 4

<TouchableOpacity onPress={this.buttonClicked} style={styles.skip}>
   <Text>Skip</Text>
</TouchableOpacity>

希望它对您有用。

Answer 5

请参见以下示例

import * as React from 'react';
import { Button, View, Text, TouchableOpacity } from 'react-native';

class App extends React.Component {
  buttonClicked = () => {
    return alert('clicked');
  };
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <TouchableOpacity
          onPress={this.buttonClicked}  
          style={styles.skip}>
          <Text>Skip</Text>
        </TouchableOpacity>
      </View>    
    );
  }
}

const styles = {
  skip: {
    width: '90%',
    padding: 10,
    backgroundColor: 'green',
  },
};

export default App;

如有疑问，请放心。

Answer 6

问题是absolute的位置变化解决了问题。

React Native-onPress函数不会触发

6 个答案: