Question

我正在尝试使用React Native构建应用程序。我做了一个自定义按钮，onPress无法正常工作，试图寻找答案，但找不到任何答案，代码看起来就像文档（从那里复制）一样。

这是自定义按钮：

    import React from 'react';
    import { View, Text, StyleSheet, TouchableHighlight, TouchableOpacity } from 'react-native';
    import COLORS from '../constants/constants';

    class AppButton extends React.Component {
        render() {
            return(
                <View style={styles.container}>
                    <TouchableOpacity>
                        <Text style={styles.title}>
                            {this.props.title}
                        </Text>
                    </TouchableOpacity>
                </View>
              );
        }
    }

    const styles = StyleSheet.create({
      container: {
        backgroundColor: COLORS.appOrange,
        borderRadius: 20,
        elevation: 3,
        flexShrink: 0,
        width: '100%',
        height: 60,
        justifyContent: 'center'
      },
      title: {
          fontSize: 24,
          color: COLORS.appWhite,
          textAlign: 'center',
      },
    });

    export default AppButton;

这就是我尝试使用onPress的方式：

    import React from 'react';
import { View, Text, StyleSheet, TextInput } from 'react-native';
import COLORS from '../constants/constants';
import Card from '../components/card';
import { Colors } from 'react-native/Libraries/NewAppScreen';
import AppTextInput from '../components/appTextInput';
import AppButton from '../components/appButton';

class Login extends React.Component {

    onPress = () => {
      console.log("hello world!@#!@#@!#");
        // this.setState({
        //   count: this.state.count + 1
        // });
    };

    render() {
        return(
            <View style={styles.superContainer}>
              <View style={styles.formContainer}>
                  <AppTextInput placeHolderText="Email@Address.com"></AppTextInput>
                  <AppTextInput placeHolderText="Passwrod"></AppTextInput>
              </View>
              <View style={styles.buttonContainer}>
                  <AppButton
                  title="LOGIN"
                  style={styles.loginButton}
                  onPress={this.onPress}
                  />
              </View>
            </View>

        );
    }
}

我尝试查看控制台，但没有打印出任何内容，尝试了一些在互联网上看到的不同示例，但水龙头却无法注册。

Answer 1

我已将OnPress方法作为道具传递给AppButton，并将此方法附加到TouchableOpcaity OnPress事件

 import React from 'react';
    import { View, Text, StyleSheet, TouchableHighlight, TouchableOpacity } from 'react-native';
    import COLORS from '../constants/constants';

    class AppButton extends React.Component {
        render() {
            return(
                <View style={styles.container}>
                    <TouchableOpacity onPress={this.props.handleOnPress}>
                        <Text style={styles.title}>
                            {this.props.title}
                        </Text>
                    </TouchableOpacity>
                </View>
              );
        }
    }

    const styles = StyleSheet.create({
      container: {
        backgroundColor: COLORS.appOrange,
        borderRadius: 20,
        elevation: 3,
        flexShrink: 0,
        width: '100%',
        height: 60,
        justifyContent: 'center'
      },
      title: {
          fontSize: 24,
          color: COLORS.appWhite,
          textAlign: 'center',
      },
    });

    export default AppButton;

  import React from 'react';
import { View, Text, StyleSheet, TextInput } from 'react-native';
import COLORS from '../constants/constants';
import Card from '../components/card';
import { Colors } from 'react-native/Libraries/NewAppScreen';
import AppTextInput from '../components/appTextInput';
import AppButton from '../components/appButton';

class Login extends React.Component {

    onPress = () => {
      console.log("hello world!@#!@#@!#");
        // this.setState({
        //   count: this.state.count + 1
        // });
    };

    render() {
        return(
            <View style={styles.superContainer}>
              <View style={styles.formContainer}>
                  <AppTextInput placeHolderText="Email@Address.com"></AppTextInput>
                  <AppTextInput placeHolderText="Passwrod"></AppTextInput>
              </View>
              <View style={styles.buttonContainer}>
                  <AppButton
                  title="LOGIN"
                  style={styles.loginButton}
                  handleOnPress={this.onPress}
                  />
              </View>
            </View>

        );
    }
}

Answer 2

在您的情况下，您没有将onPress道具传递到自定义按钮组件内部的TouchableOpacity中。

尝试一下

自定义按钮

import React from "react";
import {
  View,
  Text,
  StyleSheet,
  TouchableHighlight,
  TouchableOpacity
} from "react-native";
import COLORS from "../constants/constants";

class AppButton extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this.props.onPress}>
          <Text style={styles.title}>{this.props.title}</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: COLORS.appOrange,
    borderRadius: 20,
    elevation: 3,
    flexShrink: 0,
    width: "100%",
    height: 60,
    justifyContent: "center"
  },
  title: {
    fontSize: 24,
    color: COLORS.appWhite,
    textAlign: "center"
  }
});

export default AppButton;

登录类

import React from "react";
import { View, Text, StyleSheet, TextInput } from "react-native";
import COLORS from "../constants/constants";
import Card from "../components/card";
import { Colors } from "react-native/Libraries/NewAppScreen";
import AppTextInput from "../components/appTextInput";
import AppButton from "../components/appButton";

class Login extends React.Component {
  onPress = () => {
    console.log("hello world!@#!@#@!#");
    // this.setState({
    //   count: this.state.count + 1
    // });
  };

  render() {
    return (
      <View style={styles.superContainer}>
        <View style={styles.formContainer}>
          <AppTextInput placeHolderText="Email@Address.com"></AppTextInput>
          <AppTextInput placeHolderText="Passwrod"></AppTextInput>
        </View>
        <View style={styles.buttonContainer}>
          <AppButton
            title="LOGIN"
            style={styles.loginButton}
            onPress={this.onPress}
          />
        </View>
      </View>
    );
  }
}

Answer 3

您确定“ this”动词指向正确的对象（类实例）吗？

让我们检查一下：

class Login extends React.Component {

    const onPress = () => {
      console.log("the world is not enough");
    };

    render() {
        /* assign this class instance to that reference */
        const that = this;

        return(
            ...
              <View style={styles.buttonContainer}>
                  <AppButton
                  title="LOGIN"
                  style={styles.loginButton}

                  /* use that class reference */
                  onPress={that.onPress}
                  />
              </View>
            ... 
        );
    }
}

OnPress没有被呼叫

3 个答案: