使用 TouchableOpacity 的 OnPress() 在 react-native 应用程序中不起作用答案

【问题标题】：OnPress() using TouchableOpacity is not working in react-native application使用 TouchableOpacity 的 OnPress() 在 react-native 应用程序中不起作用
【发布时间】：2021-06-09 03:35:55
【问题描述】：

当我单击 RoundedButton 时，TouchableOpacity 起作用，即按钮的不透明度降低但 onPress 函数不起作用，传递给 onPress 函数的数据是正确的（如下面的代码所示）。此外，当我尝试在 onPress 函数中使用 console.log("something") 时，它不会在我的终端控制台中打印出来。

这里我有函数组件的代码。

Focus.js 文件

import React, { useState } from "react";
import { Text, View, StyleSheet } from "react-native";
import { TextInput } from "react-native-paper";
import { RoundedButton } from "../../component/RoundedButton";

export const Focus = ({ addSubject }) => {
  const [tmpItem, setTmpItem] = useState();

  return (
    <View style={styles.container}>
      <View style={styles.titleContainer}>
        <Text style={styles.title}>What would you like to focus on?</Text>
        <View style={styles.inputContainer}>
          <TextInput
            style={{ flex: 1, marginRight: 20 }}
            onSubmitEditing={({ nativeEvent }) => {
              setTmpItem(nativeEvent.text);
              console.log("tmpItem value set " + tmpItem);
            }}
          />
          <RoundedButton
            size={50}
            title="+"
            onPress={() => {
              console.log("value passed!");
              addSubject(tmpItem);
            }}
          />
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  titleContainer: {
    flex: 0.5,
    padding: 10,
    justifyContent: "center",
  },
  title: {
    color: "white",
    fontWeight: "bold",
    fontSize: 21,
  },
  inputContainer: {
    paddingTop: 10,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
  },
});

RoundedButton.js 文件

import React from "react";
import { TouchableOpacity, Text, StyleSheet } from "react-native";

export const RoundedButton = ({
  style = {},
  textStyle = {},
  size = 125,
  ...props
}) => {
  return (
    <TouchableOpacity style={[styles(size).radius, style]}>
      <Text style={[styles.text, textStyle]}>{props.title}</Text>
    </TouchableOpacity>
  );
};

const styles = (size) =>
  StyleSheet.create({
    radius: {
      borderRadius: size / 2,
      width: size,
      height: size,
      alignItems: "center",
      justifyContent: "center",
      borderColor: "white",
      borderWidth: 2,
    },
    text: {
      color: "white",
      fontSize: size / 3,
    },
  });

App.js 文件

import React, { useState } from "react";
import { Text, View, StyleSheet } from "react-native";
import { Focus } from "./src/features/focus/Focus";

export default function App() {
  const [focusSubject, setFocusSubject] = useState(null);

  return (
    <View style={styles.container}>
      {focusSubject ? (
        <Text style={{ flex: 1, color: "white", fontSize: 30 }}>
          Here is where I am going to build a timer
        </Text>
      ) : (
        <Focus addSubject={setFocusSubject} />
      )}
      <Text style={{ flex: 1, color: "white", fontSize: 30 }}>
        {focusSubject}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 50,
    backgroundColor: "#252250",
  },
});

【问题讨论】：

标签： react-native onpress

【解决方案1】：

您需要在RoundButton.js 中提取您的onPress props 并传递给您的TouchableOpacity

export const RoundedButton = ({
  style = {},
  textStyle = {},
  size = 125,
  onPress,//<===this
  ...props
}) => {
  return (
    <TouchableOpacity onPress={onPress} style={[styles(size).radius, style]}>
      <Text style={[styles.text, textStyle]}>{props.title}</Text>
    </TouchableOpacity>
  );
};

【讨论】：

【解决方案2】：

您似乎忘记将 onPress 函数传递给 TouchOpacity

export const RoundedButton = ({
  style = {},
  textStyle = {},
  size = 125,
  onPress,
  ...props
}) => {
  return (
    <TouchableOpacity onPress={onPress} style={[styles(size).radius, style]}>
      <Text style={[styles.text, textStyle]}>{props.title}</Text>
    </TouchableOpacity>
  );
};

【讨论】：

【解决方案3】：

现在可以了

Focus.js 文件

import React, { useState } from "react";
import { Text, View, StyleSheet } from "react-native";
import { TextInput } from "react-native-paper";
import { RoundedButton } from "../../component/RoundedButton";

export const Focus = ({ addSubject }) => {
  const [tmpItem, setTmpItem] = useState();

  return (
    <View style={styles.container}>
      <View style={styles.titleContainer}>
        <Text style={styles.title}>What would you like to focus on?</Text>
        <View style={styles.inputContainer}>
          <TextInput
            style={{ flex: 1, marginRight: 20 }}
            onSubmitEditing={({ nativeEvent }) => {
              setTmpItem(nativeEvent.text);
              console.log("tmpItem value set " + tmpItem);
            }}
          />
          <RoundedButton
            size={50}
            title="+"
            onPress={() => {
              console.log("value passed!");
              addSubject(tmpItem);
            }}
          />
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  titleContainer: {
    flex: 0.5,
    padding: 10,
    justifyContent: "center",
  },
  title: {
    color: "white",
    fontWeight: "bold",
    fontSize: 21,
  },
  inputContainer: {
    paddingTop: 10,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
  },
});

RoundedButton.js 文件

import React from "react";
import { TouchableOpacity, Text, StyleSheet } from "react-native";

export const RoundedButton = ({
  style = {},
  textStyle = {},
  size = 125,
  onPress,
  ...props
}) => {
  return (
    <TouchableOpacity onPress={onPress} style={[styles(size).radius, style]}>
      <Text style={[styles.text, textStyle]}>{props.title}</Text>
    </TouchableOpacity>
  );
};

const styles = (size) =>
  StyleSheet.create({
    radius: {
      borderRadius: size / 2,
      width: size,
      height: size,
      alignItems: "center",
      justifyContent: "center",
      borderColor: "white",
      borderWidth: 2,
    },
    text: {
      color: "white",
      fontSize: size / 3,
    },
  });

App.js 文件

import React, { useState } from "react";
import { Text, View, StyleSheet } from "react-native";
import { Focus } from "./src/features/focus/Focus";

export default function App() {
  const [focusSubject, setFocusSubject] = useState();

  return (
    <View style={styles.container}>
      {focusSubject ? (
        <Text style={{ flex: 1, color: "white", fontSize: 30 }}>
          Here is where I am going to build a timer
        </Text>
      ) : (
        <Focus addSubject={setFocusSubject} />
      )}
      <Text style={{ flex: 1, color: "white", fontSize: 30 }}>
        {focusSubject}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 50,
    backgroundColor: "#252250",
  },
});

【讨论】：