OnPress() 使用 TouchableOpacity 在本机应用程序中不起作用

问题描述

当我单击 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",});

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,borderColor: "white",borderWidth: 2,text: {
      color: "white",fontSize: size / 3,});

App.js 文件

import React,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,fontSize: 30 }}>
        {focusSubject}
      </Text>
    </View>
  );
}

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

onpress react-native